/* Vorlage der Produktseiten (Instanz Catering, Musterseite T10, 2026-10-23). Lädt nach css/seite.css (Robo): Farben,
   Schrift, Kopfzeile, Knöpfe, Preiszeile und Abschlusskarte kommen von dort. Hier nur, was die Produktseiten eigens
   brauchen. Aufbau nach dem Test der Musterseite (2026-10-23): Hero mit Rundgang, Datenleiste, vier Karten auf Schwarz,
   Zeitraffer (css/catering-zeitraffer.css), Ruf und App (css/produkt-ruf.css), Weitere Modelle, Kontakt. Flach wie die
   CIN-Next-Seiten (Nutzer: "Wenig Schatten, wenig 3D optik im style bis auf die 3d assets"). */

/* ===== Coming soon: Band unter der Kopfzeile, wenn CIN das Produkt nicht anbietet ===== */
.produkt-bald {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.6rem;
  margin: var(--kopf-h) 0 0;
  padding: 0.6rem var(--rand);
  background: var(--akzent-weich);
  color: var(--titel);
  font-size: 0.9rem;
  text-align: center;
}

.produkt-bald span {
  color: var(--text2);
}

/* Das Band zieht seine Höhe vom Hero ab (--bald-h setzt js/produkt.js), damit Hero und Datenleiste auch auf Seiten
   nicht angebotener Modelle genau den ersten Bildschirm füllen (Fund Cleaning 2026-10-27: C30, C20 bis 42 px darüber) */
.produkt-bald + .produkt-hero {
  min-height: calc(100svh - var(--kopf-h) - var(--bald-h, 0px));
}

/* ab 768 px ist auch die Bühne um das Band niedriger; sie bestimmt dort die Höhe des Hero */
@media (min-width: 768px) {
  .produkt-bald + .produkt-hero .produkt-buehne {
    height: calc(min(40rem, 76vh) - var(--bald-h, 0px));
  }
}

.produkt-bald + .produkt-hero .produkt-hero-banner {
  padding-top: 2.6rem;
}

/* ===== Hero mit Rundgang (gewählt 2026-10-23, "Rundgang im Hero"): links fährt der Roboter ein, danach fliegt die
   Kamera zum aktiven Punkt; rechts Name, Satz, Punkte mit Fortschrittsbalken, Preis und Knöpfe. Seit 2026-10-26
   (Nutzer: "im herobanner den text rechts und das bild links. alles mehr in der mitte", gewählt "1200 px") steht der
   Inhalt höchstens 1200 px breit in der Mitte; im Code bleibt der Text vorn, das Raster stellt ihn nach rechts ===== */
.produkt-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* Die Leinwand reicht für Nahaufnahmen weit nach oben; ganz oben auf der Seite endet sie an der Unterkante der
   Kopfzeile, sonst schimmert der Roboter durch deren Unschärfe (Fund Heavy-Load, S100 Blick "Last", 2026-10-26).
   Mit dem Band "Coming soon" beginnt der Hero ohnehin unter der Kopfzeile */
.produkt-hero:first-child {
  clip-path: inset(var(--kopf-h) 0 0);
}

.produkt-hero-banner {
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  grid-template-areas: "buehne text";
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  padding: 6.2rem max(5vw, (100% - 1200px) / 2) 3.6rem;
}

.produkt-hero-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
}

/* über der Leinwand des Roboters, die über die Bühne hinausragt */
.produkt-hero-kopf,
.produkt-hero .merkmal-punkte,
.produkt-hero-kauf {
  position: relative;
  z-index: 4;
}

.produkt-hero-kopf h1 {
  margin: 0.1rem 0 0;
  color: var(--titel);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.produkt-hero-kopf h1 em {
  font-style: normal;
  color: var(--pk-robo);
}

.produkt-satz {
  margin-top: 0.7rem;
  color: var(--titel);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.produkt-unter {
  max-width: 26rem;
  margin-top: 0.6rem;
  color: var(--leise);
  font-size: 1rem;
  line-height: 1.6;
}

/* Punkte des Rundgangs wie der Rundgang im Hero der Startseite */
.merkmal-punkte {
  display: grid;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.merkmal-punkt {
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.55rem 0.8rem;
  overflow: hidden;
  border: 1px solid var(--karte-rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text2);
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  opacity: 0.72;
  transition: border-color 0.3s, background-color 0.3s, opacity 0.3s, transform 0.4s var(--weich);
}

.merkmal-punkt:hover {
  opacity: 1;
}

.merkmal-punkt.ist-aktiv {
  border-color: color-mix(in srgb, var(--pk-robo) 45%, transparent);
  background: color-mix(in srgb, var(--pk-robo) 5%, var(--flaeche));
  opacity: 1;
  transform: translateX(4px);
}

.merkmal-sq {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 9px;
  background: var(--akzent-weich);
  color: var(--pk-robo);
  transition: background-color 0.3s, color 0.3s;
}

.merkmal-punkt.ist-aktiv .merkmal-sq {
  background: var(--pk-robo);
  color: #fff;
}

.merkmal-sq svg {
  width: 1.3rem;
  height: 1.3rem;
}

.merkmal-was b {
  display: block;
  color: var(--titel);
  font-size: 0.95rem;
}

/* Fortschritt des aktiven Punkts, so lang wie TAKT in js/produkt.js */
.merkmal-balken {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--pk-robo);
  transform: scaleX(0);
  transform-origin: left;
}

.merkmal-punkt.ist-aktiv .merkmal-balken {
  animation: merkmal-balken var(--takt, 2.5s) linear forwards;
}

@keyframes merkmal-balken {
  to {
    transform: scaleX(1);
  }
}

.produkt-hero-kauf {
  margin-top: 1.3rem;
}

.produkt-preis {
  margin: 0;
}

.produkt-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

/* Bühne: Licht und Boden stehen sofort, der Roboter fährt ein, sobald three.js und das Modell geladen sind */
.produkt-buehne {
  grid-area: buehne;
  position: relative;
  height: min(40rem, 76vh);
}

.produkt-licht {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 52% 50% at 50% 76%, var(--licht), transparent 72%);
  transition: opacity 0.6s var(--weich);
}

.produkt-boden {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0.9rem;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--boden), transparent);
  transition: opacity 0.6s var(--weich);
}

/* Im Rundgang ist die Kamera nah am Teil: Licht und Boden der Bühne treten zurück */
.produkt-buehne.im-rundgang .produkt-licht,
.produkt-buehne.im-rundgang .produkt-boden {
  opacity: 0;
}

/* Leinwand über die Bühne hinaus nach links in den Seitenrand, nach oben bis unter die Kopfzeile und unter den Boden
   (Spiegelung); zum Text hin (rechts) und unten weich ausgeblendet, damit Nahaufnahmen im Rundgang nicht hart
   abgeschnitten werden */
.produkt-3d {
  position: absolute;
  z-index: 3;
  top: -40vh;
  right: -2rem;
  bottom: -3rem;
  left: -5vw;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 2rem), linear-gradient(to bottom, transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent, #000 2rem), linear-gradient(to bottom, transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
  mask-composite: intersect;
}

.produkt-3d canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.produkt-3d .produkt-3d-unten {
  filter: blur(5px);
}

.produkt-3d.ueber {
  cursor: grab;
}

.produkt-3d.zieht {
  cursor: grabbing;
}

/* Rückfall ohne WebGL: freigestelltes Foto, blendet ein */
.produkt-foto {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2.1rem;
  height: 80%;
  width: auto;
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
}

.produkt-foto.ist-da {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Etikett am Teil: Punkt mit Schein, daneben der Text; blendet nach der Kamerafahrt ein */
.merkmal-chip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.merkmal-chip i {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(51, 209, 230, 0.25);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s var(--weich), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.merkmal-chip span {
  position: absolute;
  left: 16px;
  top: -15px;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--titel);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--weich) 0.08s, transform 0.45s var(--weich) 0.08s;
}

.merkmal-chip.links span {
  left: auto;
  right: 16px;
  transform: translateX(8px);
}

.merkmal-chip.ist-da i,
.merkmal-chip.ist-da span {
  opacity: 1;
  transform: none;
}

/* ===== Datenleiste direkt unter dem Hero (gewählt 2026-10-23, "Leiste unter dem Hero") ===== */
/* so breit wie der Inhalt des Hero (gewählt 2026-10-26, "Wie der Hero"), der Streifen bleibt fensterbreit */
.produkt-daten {
  padding: 1.8rem max(var(--rand), (100% - 1200px) / 2) 1.6rem;
  border-top: 1px solid var(--linie);
  background: var(--flaeche2);
}

/* Spalten nie schmaler als das längste Wort, damit keine Bezeichnung mitten im Wort bricht (2026-10-27: vorher
   "GESCHWINDIGKE IT" bei 1920 px) */
.daten-leiste {
  display: grid;
  grid-template-columns: minmax(min-content, 1.5fr) repeat(7, minmax(min-content, 1fr));
  margin: 0;
}

.daten-wert {
  padding: 0.15rem 1rem;
  border-left: 1px solid var(--linie);
}

.daten-wert:first-child {
  padding-left: 0;
  border-left: 0;
}

.daten-wert dt {
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.daten-wert dd {
  position: relative;
  margin: 0.35rem 0 0;
  color: var(--titel);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.daten-hinweise {
  margin-top: 1.2rem;
  color: var(--k);
  font-size: 0.75rem;
  line-height: 1.55;
}

.daten-hinweise p + p {
  margin-top: 0.3rem;
}

/* "i" an abweichenden Werten, nur im Mitarbeitermodus (?team): kleiner Kreis am Wert, darunter alle Quellen */
.parameter-i {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--knopf-bg);
  color: var(--leise);
  font-size: 0.68rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.12em;
  cursor: pointer;
}

.parameter-i[hidden] {
  display: none;
}

.parameter-quellen {
  display: none;
}

.parameter-i[aria-expanded="true"] + .parameter-quellen {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 3;
  display: grid;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
}

.parameter-quellen b {
  display: inline-block;
  min-width: 5.5rem;
  color: var(--leise);
  font-weight: 500;
}

/* ===== Abschnitte ===== */
.produkt-abschnitt {
  padding: 12vh var(--rand) 10vh;
  border-top: 1px solid var(--linie);
}

.produkt-kopf {
  max-width: 44rem;
}

.produkt-kopf h2 {
  color: var(--titel);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.produkt-kopf-text {
  max-width: 36rem;
  margin-top: 0.75rem;
  color: var(--leise);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Einblenden beim Hinscrollen wie auf der Startseite */
.bewegt .produkt-seite .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
  transition-delay: var(--verzug, 0s);
}

.bewegt .produkt-seite .einblenden.ist-da {
  opacity: 1;
  transform: none;
}

/* ===== Vier Karten auf Schwarz (gewählt 2026-10-23, "4 Karten auf Schwarz"): kleiner Clip oben, Titel, Text und
   Kennzeichen darunter; die aktive Karte steht vorn, die anderen treten zurück. In Hell und Dunkel schwarz, weil die
   Clips von KEENON dunkel sind ===== */
.produkt-band {
  padding: 12vh var(--rand) 11vh;
  background: #0a0a0b;
  color: #e8eaee;
}

.produkt-band .augenbraue {
  color: #8b93a1;
}

.produkt-band .produkt-kopf h2 {
  color: #fff;
}

.produkt-band .produkt-kopf-text {
  color: #a7afbb;
}

.haupt-karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.4rem;
}

.haupt-karte {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.65rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #141518;
  transition: opacity 0.5s var(--weich), border-color 0.4s;
}

.haupt-karten.hat-aktiv .haupt-karte:not(.ist-aktiv) {
  opacity: 0.5;
}

.haupt-karte.ist-aktiv {
  border-color: rgba(51, 209, 230, 0.42);
}

.haupt-medium {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #202226;
  cursor: pointer;
}

.haupt-medium video,
.haupt-medium img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.haupt-medium:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Fortschritt der aktiven Karte, so lang wie TAKT in js/produkt-abschnitte.js */
.haupt-balken {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
}

.haupt-karte.ist-aktiv .haupt-balken {
  animation: merkmal-balken var(--takt, 10s) linear forwards;
}

.haupt-karte h3 {
  margin: 1.1rem 0.45rem 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.25;
}

.haupt-karte p {
  margin: 0.55rem 0.45rem 0;
  color: #b4bcc8;
  font-size: 1rem;
  line-height: 1.6;
}

.haupt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0.45rem 0;
  padding: 1.1rem 0 0;
  list-style: none;
}

.haupt-chips li {
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(51, 209, 230, 0.4);
  border-radius: 999px;
  background: rgba(51, 209, 230, 0.08);
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ===== Fassung 2: Hero und Datenleiste füllen zusammen den ersten Bildschirm wie auf der Startseite (Robo 2026-10-27,
   .hero-banner und .start-daten in css/seite.css). Inhalt der Leiste je Wert eine Zeile (Nutzer: "der Content sollte in
   der Regel nie mehr als eine Zeile überschreiten"), Hinweise als ein Absatz mit wenig Umbrüchen ===== */
.vorlage-2 .produkt-hero {
  display: flex;
  flex-direction: column;
}

.vorlage-2 .produkt-hero-banner {
  flex: 1 0 auto;
  min-height: 0;
  padding-top: 5.4rem;
  padding-bottom: 1.2rem;
}

.vorlage-2 .merkmal-punkte {
  margin-top: 1.1rem;
}

.vorlage-2 .produkt-daten {
  position: relative;
  z-index: 5;
  padding-top: 1.3rem;
  padding-bottom: 1.1rem;
}

.vorlage-2 .daten-wert dt,
.vorlage-2 .daten-wert dd {
  white-space: nowrap;
}

.vorlage-2 .daten-hinweise {
  margin-top: 0.8rem;
  font-size: 0.72rem;
  text-wrap: pretty;
}

/* Handy: zwei Spalten, die Abmessungen über beide, damit jeder Wert in eine Zeile passt */
@media (max-width: 767.98px) {
  .vorlage-2 .daten-wert:first-child {
    grid-column: 1 / -1;
  }

  .vorlage-2 .daten-wert:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }

  .vorlage-2 .daten-wert:nth-child(2n + 1):not(:first-child) {
    padding-left: 0.8rem;
    border-left: 1px solid var(--linie);
  }
}

/* ===== Fassung 2 (vorlage: 2, Nutzer 2026-10-27, Ablauf in js/produkt-abschnitte.js): Screens im Stapel auf Schwarz,
   Kanten schräg (Nutzer: "ganz simpel um 10° anschrägen", dann "viel zu viel", gezeigt etwa 4°). Das Schwarz liegt mit Punktraster wie im Hero der
   Übersicht (uebersicht.css, .uv-hero::before, 16 px) als Parallelogramm hinter dem Inhalt; über und unter der Schräge
   läuft die Fläche der Nachbarn weiter (oben die Datenleiste, unten die Seite). Hellere Punkte und ein ruhiger Schein in
   Cyan um den Stapel (Maske an --sx, --sy wie im Hero der Übersicht) ===== */
.produkt-band.ist-stapel {
  --schraeg: 6.99vw; /* tan 4° × Breite, wie SCHRAEG in js/produkt-abschnitte.js */
  position: relative;
  isolation: isolate;
  padding: calc(var(--schraeg) * 0.4 + 4vh + 1.5rem) var(--rand) calc(var(--schraeg) + 3vh);
  background: linear-gradient(var(--flaeche2) 50%, var(--bg) 50%);
}

.band-kern {
  position: absolute;
  inset: var(--schraeg) 0;
  pointer-events: none;
}

.produkt-band.ist-stapel::before,
.produkt-band.ist-stapel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 16px 16px;
  clip-path: polygon(0 0, 100% var(--schraeg), 100% 100%, 0 calc(100% - var(--schraeg)));
  pointer-events: none;
}

.produkt-band.ist-stapel::before {
  z-index: -3;
  background-color: #0a0a0b;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.3px);
}

.produkt-band.ist-stapel::after {
  z-index: -2;
  background-image: radial-gradient(rgba(150, 232, 245, 0.34) 1px, transparent 1.4px);
  -webkit-mask-image: radial-gradient(var(--srx, 40vw) var(--sry, 30vw) at var(--sx, 30%) var(--sy, 60%), rgba(0, 0, 0, 0.75), transparent);
  mask-image: radial-gradient(var(--srx, 40vw) var(--sry, 30vw) at var(--sx, 30%) var(--sy, 60%), rgba(0, 0, 0, 0.75), transparent);
  animation: stapel-atem 6s ease-in-out infinite alternate;
}

.ist-stapel + .produkt-abschnitt {
  border-top: 0;
}

.band-pakete {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stapel-buehne {
  --dx: 30px;
  --dy: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 1320px;
  margin-top: 2.6rem;
}

.stapel {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  margin: calc(var(--dy) * 3) calc(var(--dx) * 3) 0 0;
}

/* Schein in Cyan hinter dem Stapel, atmet langsam */
.stapel::before {
  content: "";
  position: absolute;
  inset: -16% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(51, 209, 230, 0.17), transparent 78%);
  animation: stapel-atem 6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Platz k: 0 vorn, jeder weitere nach rechts oben versetzt, kleiner und dunkler */
.stapel-screen {
  --platz: translate(calc(var(--k) * var(--dx)), calc(var(--k) * var(--dy) * -1)) scale(calc(1 - var(--k) * 0.05));
  position: absolute;
  inset: 0;
  z-index: calc(10 - var(--k));
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #16181c;
  transform: var(--platz);
  transform-origin: 100% 0;
  filter: brightness(calc(1 - var(--k) * 0.2)) saturate(calc(1 - var(--k) * 0.15));
  cursor: pointer;
  transition:
    transform 0.9s var(--weich),
    filter 0.9s var(--weich),
    border-color 0.4s;
}

.stapel-screen.ist-vorn {
  border-color: rgba(51, 209, 230, 0.32);
  cursor: default;
}

.stapel-screen video,
.stapel-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stapel-screen:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Wechsel "Nach hinten einsortieren": der vorderste gleitet nach links unten, wird kleiner und dunkler und schiebt sich
   hinter die anderen an seinen neuen Platz (--k); die übrigen rücken über die Transition vor */
.stapel-screen.geht-hinten {
  animation: stapel-hinten 0.9s var(--weich) both;
}

@keyframes stapel-hinten {
  0% {
    z-index: 11;
    transform: none;
    filter: brightness(1);
  }
  42% {
    z-index: 11;
    transform: translate(-7%, 12%) scale(0.9);
    filter: brightness(0.7);
  }
  43% {
    z-index: 0;
  }
  100% {
    z-index: 0;
    transform: var(--platz);
    filter: brightness(calc(1 - var(--k) * 0.2)) saturate(calc(1 - var(--k) * 0.15));
  }
}

/* Lichtstrich über dem neuen Clip */
.stapel-strich {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 47%, rgba(51, 209, 230, 0.16) 53%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}

.stapel-screen.ist-vorn .stapel-strich {
  animation: stapel-strich 1.2s 0.45s var(--weich) both;
}

@keyframes stapel-strich {
  to {
    transform: translateX(130%);
  }
}

/* Timer: eine Linie läuft in --takt einmal um den Rand des vordersten Screens (gewählt "Linie um den Screen") */
.stapel-timer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stapel-timer rect {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.ist-auto .stapel-screen.ist-vorn .stapel-timer rect {
  opacity: 1;
  animation: stapel-timer var(--takt, 10s) linear both;
}

@keyframes stapel-timer {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stapel-atem {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}

/* Text: Nummer rollt, Titel tippt mit Block-Cursor (JetBrains Mono wie im Hero der Übersicht), dann Satz und Chips */
.stapel-text {
  min-height: 19rem;
}

.stapel-zahl {
  display: flex;
  align-items: baseline;
  color: #8b93a1;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.stapel-nr {
  position: relative;
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
  color: var(--cyan);
  font-weight: 700;
}

.stapel-nr > span {
  display: block;
}

.stapel-nr .ist-alt {
  animation: zahl-raus 0.5s var(--weich) both;
}

.stapel-nr .ist-neu {
  position: absolute;
  inset: 0 auto auto 0;
  animation: zahl-rein 0.5s var(--weich) both;
}

@keyframes zahl-raus {
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes zahl-rein {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

.stapel-titel {
  min-height: 2.5em;
  margin-top: 0.8rem;
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.stapel-titel.markiert .stapel-tipp {
  background: var(--cyan);
  color: #0a0a0b;
}

.stapel-cursor {
  display: inline-block;
  width: 0.58em;
  height: 1.02em;
  margin-left: 0.08em;
  vertical-align: -0.14em;
  background: var(--cyan);
  animation: stapel-cursor 1.05s steps(1) infinite;
}

.stapel-titel.tippt .stapel-cursor,
.stapel-titel.markiert .stapel-cursor {
  animation: none;
}

@keyframes stapel-cursor {
  50% {
    opacity: 0;
  }
}

.stapel-satz {
  max-width: 32rem;
  min-height: 5em;
  margin-top: 1rem;
  color: #b4bcc8;
  font-size: 1.05rem;
  line-height: 1.65;
}

.stapel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 2rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.stapel-chips li {
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(51, 209, 230, 0.4);
  border-radius: 999px;
  background: rgba(51, 209, 230, 0.08);
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Mit Bewegung: vor dem Start ist der Text verborgen, Satz und Chips gleiten nach dem Tippen herein (Chips federn) */
.bewegt .ist-stapel:not(.ist-gestartet) .stapel-titel {
  visibility: hidden;
}

.bewegt .stapel-satz {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}

.bewegt .stapel-satz.ist-da {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--weich),
    transform 0.6s var(--weich);
}

.bewegt .stapel-chips li {
  opacity: 0;
  transition: opacity 0.25s;
}

.bewegt .stapel-chips.ist-da li {
  animation: chip-feder 0.55s calc(0.25s + var(--d, 0s)) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes chip-feder {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 899.98px) {
  .stapel-buehne {
    --dx: 18px;
    --dy: 14px;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .stapel-text {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .produkt-band.ist-stapel::after,
  .stapel::before,
  .stapel-cursor {
    animation: none;
  }

  .stapel-screen {
    transition: none;
  }

  .stapel-strich,
  .stapel-timer {
    display: none;
  }
}

/* ===== Weitere Modelle, Fassung 2: Karten wie im Vergleich der Startseite (.karte, .karten aus css/seite.css). Spalten
   wie dort (5, 3, 2, 1), bei weniger Modellen so breit wie eine Karte dort und mittig. Mehr Abstand zur Überschrift
   (Nutzer 2026-10-27). Beim Überfahren fährt das 3D-Modell um --fig-3d größer ein als das Foto und ragt oben aus der
   Karte (Nutzer: "modelle so groß wie auf dem referenzbild. soll aus der card oben herausragen", dann "vorheriger größe
   für bilder und cards zurücksetzen nur die animation soll größer sein"); das Raster hat oben Platz dafür, damit die
   3D-Leinwand das Modell fasst. Ohne Überfahren (Touch) gibt es kein 3D und keinen Platz darüber ===== */
.weitere-karten {
  --sp: 5;
  --fig-3d: 1.8;
  grid-template-columns: repeat(min(var(--sp), var(--n)), minmax(0, 1fr));
  max-width: calc(min(var(--sp), var(--n)) * 340px);
  margin: 3.2rem auto 0;
}

@media (hover: hover) {
  .weitere-karten {
    --ueber: 130px;
    padding-top: var(--ueber);
  }
}

/* Farbschein hinter der Reihe (.karten::before aus css/seite.css) erst ab der Oberkante der Karten und mit weichem Rand;
   sonst stand er bei einer einzigen Karte als scharf abgeschnittener Fleck im Platz darüber (Fund Heavy-Load
   2026-10-27, S100 mit nur dem S300) */
.weitere-karten::before {
  top: var(--ueber, 0px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

.weitere-karte2 .weitere-figur {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: auto;
  height: 210px;
  margin-bottom: 14px;
  pointer-events: auto;
}

/* Katalogbild im echten Größenverhältnis (--s, T10 = 1); die Figur füllt das Bild nicht ganz, daher etwas höher */
.weitere-karte2 .weitere-figur img {
  left: 0;
  height: calc(var(--s, 0.85) * 106%);
  aspect-ratio: 252 / 236;
}

.weitere-karte2 .weitere-marke {
  top: 1rem;
  left: 1rem;
}

.weitere-karte2.hat-3d.ist-3d .weitere-figur img {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}

.weitere-karte2.ist-bald .weitere-figur img {
  filter: grayscale(0.7);
  opacity: 0.55;
}

.weitere-karte2.ist-bald .karte-feld,
.weitere-karte2.ist-bald h3,
.weitere-karte2.ist-bald .karte-satz,
.weitere-karte2.ist-bald .karte-merkmale {
  opacity: 0.6;
}

.weitere-karte2.ist-bald .textknopf {
  margin-top: auto;
}

.weitere-karten .textknopf {
  font-size: 1.05rem;
}

.weitere-karten .textknopf span {
  display: inline-block;
  transition: transform 0.3s var(--weich);
}

.weitere-karten .textknopf:hover span {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .weitere-karten {
    --sp: 3;
  }
}

@media (max-width: 767.98px) {
  .weitere-karten {
    --sp: 2;
  }
}

@media (max-width: 479.98px) {
  .weitere-karten {
    --sp: 1;
  }
}

/* ===== Weitere Modelle (Nutzer 2026-10-23: "größer darstellend wie auf dem Screenshot", gewählt "Groß rechts, ragt in
   den Text"): der Roboter steht rechts und reicht von oben bis in den Text; Name und Satz links daneben, Preis und Link
   darunter über die ganze Breite. Maße relativ zur Kartenbreite (cqw), damit es bei jeder Breite passt ===== */
.weitere-raster {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.weitere-karte {
  --spalten: 3;
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - (var(--spalten) - 1) * 1rem) / var(--spalten));
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s;
}

.weitere-karte:hover,
.weitere-karte:focus-visible {
  border-color: color-mix(in srgb, var(--pk-robo) 45%, transparent);
}

.weitere-buehne {
  display: block;
  height: 52cqw;
  background: var(--studio);
}

/* Platz des Roboters: rechts, von oben bis in den Text; Bild und 3D stehen unten bündig darin */
.weitere-figur {
  position: absolute;
  z-index: 1;
  top: 5cqw;
  right: 6cqw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 42cqw;
  height: 74cqw;
  pointer-events: none;
}

/* Katalogbild (252 × 236, freigestellt, Figur mittig mit Rand): ganz zu sehen, 88 % der Höhe des Platzes, seitlich über
   den Platz hinaus und etwas nach rechts, damit die breiteste Figur (C55, 170 px) weder den Text (bis 50cqw) noch den
   Kartenrand berührt (Nutzer 2026-10-26: "Ganz, 10 % kleiner"; vorher füllte es die Höhe, breite Roboter waren
   seitlich angeschnitten). Große freigestellte Bilder (bildHoch) stehen ganz im Platz, mit weichem Schatten am Fuß */
.weitere-figur img {
  position: relative;
  left: 3cqw;
  flex: none;
  width: auto;
  max-width: none;
  height: 88%;
  aspect-ratio: 252 / 236;
  transition: opacity 0.35s var(--weich), transform 0.5s var(--weich);
}

.weitere-figur.ist-hoch img {
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.weitere-figur.ist-hoch::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -5px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27, 54, 97, 0.14), transparent);
  transition: opacity 0.35s var(--weich);
}

.weitere-karte.hat-3d.ist-3d .weitere-figur img {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}

.weitere-karte.hat-3d.ist-3d .weitere-figur::after {
  opacity: 0;
}

.weitere-karte.ist-bald .weitere-figur img {
  filter: grayscale(0.7);
  opacity: 0.55;
}

.weitere-karte.ist-bald .weitere-text,
.weitere-karte.ist-bald .weitere-fuss {
  opacity: 0.6;
}

.weitere-marke {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--pk-robo);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 650;
}

.weitere-marke--bald {
  background: var(--akzent-weich);
  color: var(--titel);
}

/* Name und Satz links neben dem Roboter, mindestens so hoch, dass Preis und Link unter seinem Fuß beginnen */
.weitere-text {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-height: calc(27cqw + 0.4rem);
  padding: 1rem 50cqw 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.weitere-text b {
  color: var(--titel);
  font-size: 1.08rem;
  line-height: 1.2;
}

.weitere-text > span {
  color: var(--leise);
}

.weitere-fuss {
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.7rem 1.1rem 1.05rem;
}

.weitere-preis {
  color: var(--titel);
  font-size: 0.88rem;
  font-weight: 600;
}

.weitere-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pk-robo);
  font-size: 0.86rem;
  font-weight: 650;
}

.weitere-mehr svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--weich);
}

.weitere-karte:hover .weitere-mehr svg {
  transform: translateX(3px);
}

.weitere-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.weitere-3d canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Boden und Spiegelung zarter als im Hero, damit unter dem Roboter kein Schatten über dem Preis liegt */
.weitere-3d .weitere-3d-unten {
  filter: blur(5px);
  opacity: 0.55;
}

/* ===== Kontakt (Nutzer 2026-10-23: "zentriert und auch ein bisschen aufhübschen vor allem die schweiz ein bisschen mit
   den schweizer farben und dem style unserer seite"): Kopf, Wege und Schweiz mittig, danach die Abschlusskarte ===== */
.produkt-kontakt .produkt-kopf {
  margin: 0 auto;
  text-align: center;
}

.kontakt-wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.kontakt-weg {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--titel);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.3s;
}

.kontakt-weg:hover {
  border-color: color-mix(in srgb, var(--pk-robo) 45%, transparent);
}

.kontakt-weg svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--pk-robo);
}

.kontakt-weg b {
  display: block;
  color: var(--k);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Schweiz: Feld mit weißem Kreuz im Stil des Logo-Felds, Akzent in Schweizer Rot */
.produkt-schweiz {
  --ch: #da291c;
  display: grid;
  justify-items: center;
  max-width: 40rem;
  margin: 2.2rem auto 0;
  padding: 1.8rem 1.8rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--ch) 22%, transparent);
  border-radius: 18px;
  background: linear-gradient(color-mix(in srgb, var(--ch) 6%, var(--flaeche)), var(--flaeche) 62%);
  text-align: center;
}

.schweiz-fahne {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
}

.schweiz-fahne svg {
  display: block;
  width: 100%;
  height: 100%;
}

.produkt-schweiz .augenbraue {
  margin-top: 0.9rem;
  color: var(--ch);
}

.produkt-schweiz h3 {
  margin-top: 0.2rem;
  color: var(--titel);
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.25;
}

.produkt-schweiz p:not(.augenbraue) {
  max-width: 32rem;
  margin-top: 0.45rem;
  color: var(--leise);
  font-size: 0.95rem;
  line-height: 1.55;
}

.produkt-schweiz .knopf-geist {
  margin-top: 1.2rem;
  border-color: color-mix(in srgb, var(--ch) 45%, transparent);
  color: var(--ch);
}

.produkt-schweiz .knopf-geist:hover {
  border-color: var(--ch);
}

[data-bs-theme="dark"] .produkt-schweiz {
  --ch: #f0473b;
}

/* Fassung 2: Schweiz als breites Band wie am Schluss der Startseite (Robo, css/seite.css ".kontakt .schweiz.berg-karte";
   Nutzer 2026-10-27 dort: "Eine umgedrehte Pyramide ist sehr schlechtes Auge", gewählt "Breites Band, Karte darunter",
   dann "alle landingpages sollen deine änderungen übernehmen"): Fahne, Text und Knopf links, der Berg rechts über die
   ganze Höhe, die linke Kante weich ausgeblendet; auf dem Handy Text oben, Berg darunter. Farben und Berg aus
   css/schweiz-berg.css. Kopf und Kacheln des Kontakts entfallen (Nutzer: "Weg wie Startseite"), das Band steht oben */
.produkt-kontakt .produkt-schweiz.berg-karte {
  margin-top: 0;
  grid-template-columns: minmax(0, 28rem);
  align-content: center;
  justify-items: start;
  max-width: 1200px;
  min-height: 18rem;
  padding: 2.4rem 2.8rem;
  border-radius: 18px;
  text-align: left;
}

.produkt-kontakt .produkt-schweiz.berg-karte .berg {
  inset: 0 0 0 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}

.produkt-kontakt .produkt-schweiz.berg-karte::before {
  content: none;
}

.produkt-kontakt .produkt-schweiz.berg-karte .augenbraue {
  margin-top: 0.9rem;
}

.produkt-kontakt .produkt-schweiz.berg-karte h3 {
  margin-top: 0.2rem;
  font-size: 1.5rem;
  font-weight: 680;
  line-height: 1.2;
}

.produkt-kontakt .produkt-schweiz.berg-karte p:not(.augenbraue) {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.produkt-kontakt .produkt-schweiz.berg-karte .knopf-geist {
  margin-top: 1.2rem;
}

@media (max-width: 767.98px) {
  .produkt-kontakt .produkt-schweiz.berg-karte {
    min-height: 0;
    padding: 1.8rem 1.2rem 11rem;
  }

  .produkt-kontakt .produkt-schweiz.berg-karte .berg {
    inset: 52% 0 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.produkt-kontakt .abschluss-karte {
  margin-top: 10vh;
  border: 1px solid var(--karte-rand);
  box-shadow: none;
}

/* ===== Breiten ===== */
@media (min-width: 1800px) {
  .weitere-karte {
    --spalten: 5;
  }
}

@media (max-width: 1279.98px) {
  .daten-leiste {
    grid-template-columns: repeat(4, minmax(min-content, 1fr));
    row-gap: 1.1rem;
  }

  .daten-wert:nth-child(4n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 1099.98px) {
  .haupt-karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023.98px) {
  .weitere-karte {
    --spalten: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .merkmal-punkt.ist-aktiv .merkmal-balken,
  .haupt-karte.ist-aktiv .haupt-balken {
    animation: none;
    transform: scaleX(1);
  }
}

/* ===== Handy: eine Spalte; im Hero erst Name und Satz, dann der Roboter, dann die Punkte ===== */
@media (max-width: 767.98px) {
  .produkt-hero {
    min-height: 0;
  }

  .produkt-hero-banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "buehne" "punkte" "kauf";
    align-content: start;
    align-items: start;
    gap: 0.7rem;
    padding: 5.6rem 1.1rem 1.8rem;
  }

  .produkt-hero-text {
    display: contents;
  }

  .produkt-hero-kopf {
    grid-area: kopf;
  }

  .produkt-buehne {
    grid-area: buehne;
    height: min(26rem, 108vw);
  }

  .produkt-hero .merkmal-punkte {
    grid-area: punkte;
    margin-top: 0.2rem;
  }

  .produkt-hero-kauf {
    grid-area: kauf;
    margin-top: 0.4rem;
  }

  .merkmal-punkt.ist-aktiv {
    transform: none;
  }

  .produkt-3d {
    top: -1.5rem;
    left: -1.1rem;
    right: -1.1rem;
    bottom: -2.2rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.5rem, #000 calc(100% - 2.2rem), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 1.5rem, #000 calc(100% - 2.2rem), transparent);
  }

  .produkt-daten {
    padding: 1.4rem 1.1rem 1.3rem;
  }

  .daten-leiste {
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
  }

  .daten-wert,
  .daten-wert:nth-child(4n + 1) {
    padding: 0.1rem 0.8rem;
    border-left: 1px solid var(--linie);
  }

  .daten-wert:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .haupt-karten {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Weitere: Karten nebeneinander zum Wischen */
  .weitere-raster {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-right: calc(-1 * var(--rand));
    margin-left: calc(-1 * var(--rand));
    padding: 0 var(--rand) 0.4rem;
    overflow-x: auto;
    scroll-padding: 0 var(--rand);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .weitere-raster::-webkit-scrollbar {
    display: none;
  }

  .weitere-karte {
    flex: 0 0 min(19rem, 78vw);
    scroll-snap-align: start;
  }

  /* angeschnittene Karten am Rand sind nie zu 20 % im Bild: ohne Einblenden, damit man sieht, dass es weitergeht */
  .bewegt .produkt-seite .weitere-karte.einblenden {
    opacity: 1;
    transform: none;
  }

  .produkt-schweiz {
    padding: 1.5rem 1.2rem 1.4rem;
  }
}