/* ========================================
   Produkt-Bühnen — Aufbau wie Variante A,
   Optik komplett aus dem Bestand (variables.css,
   buttons.css, cards.css). Keine neuen Farben,
   keine neuen Radien, keine Apple-Textlinks.
   ======================================== */

.produkte { padding: var(--space-5xl) 0; background: var(--color-white) }
.produkte + .produkte { padding-top: 0 }

/* Eine Bühne = Text links, Ansicht rechts. Jede zweite gedreht. */
.produkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* nie nacktes 1fr */
  gap: var(--space-4xl);
  align-items: center;                                     /* nicht start */
  padding: var(--space-4xl) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.produkte .produkt:last-child { border-bottom: 0 }
.produkt.gedreht .produkt-text { order: 2 }
.produkt.gedreht .produkt-bild { order: 1 }

.produkt-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.produkt-text h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  hyphens: auto;                    /* lange Komposita brechen sauber */
  overflow-wrap: break-word;
}
.produkt-text > p {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

/* Merkmalsliste im Ton der Bestands-Pakete */
.produkt-liste { list-style: none; margin: 0 0 var(--space-xl); padding: 0 }
.produkt-liste li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  line-height: 1.5;
}
.produkt-liste li::before {
  content: '';
  position: absolute; left: 0; top: 1.05em;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}

.produkt-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-md) }
.produkt-preis {
  display: block;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
.produkt-preis b { color: var(--color-black); font-weight: var(--font-semibold) }

/* ---------- Ansichten rechts ---------- */
.produkt-bild { display: flex; justify-content: center; align-items: center }

/* Telefone (TrackX) */
.telefone { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-md) }
.telefone img {
  width: clamp(110px, 13vw, 180px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-xl);
  background: var(--color-black);
}
.telefone img:nth-child(2) { margin-bottom: var(--space-2xl) }

/* Browserfenster (Websites) — gleiche Bauart wie die Showcase-Sektion */
.mini-browser {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-xl);
}
.mini-bar {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-light);
  border-bottom: 1px solid var(--color-gray-100);
}
.mini-bar i { width: 10px; height: 10px; border-radius: 50%; display: block }
.mini-bar i:nth-child(1) { background: #ff5f57 }
.mini-bar i:nth-child(2) { background: #febc2e }
.mini-bar i:nth-child(3) { background: #28c840 }
.mini-bar span { margin-left: var(--space-sm); font-size: var(--text-xs); color: var(--color-gray-500) }
.mini-browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover }

/* Dialogfenster (KI-Agent) */
.dialogfenster {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.blase {
  max-width: 82%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.blase-kunde { align-self: flex-end; background: var(--color-accent); color: var(--color-white); border-bottom-right-radius: var(--radius-sm) }
.blase-agent { align-self: flex-start; background: var(--color-light); color: var(--color-gray-900); border-bottom-left-radius: var(--radius-sm) }

/* ---------- Haus-Raster: was noch aus dem Haus kommt ---------- */
.haus { padding: var(--space-5xl) 0; background: var(--color-light) }
.haus-kachel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: box-shadow var(--transition-base);
}
.haus-kachel:hover { box-shadow: var(--shadow-lg) }
.haus-kachel h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-sm);
  hyphens: auto; overflow-wrap: break-word;
}
.haus-kachel p { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.55; margin: 0 }
.haus-kachel .zusatz {
  display: block; margin-top: var(--space-lg);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-gray-300);
}

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  .produkt { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding: var(--space-3xl) 0 }
  .produkt.gedreht .produkt-text,
  .produkt.gedreht .produkt-bild { order: 0 }
  .produkte { padding: var(--space-3xl) 0 }
  .telefone img { width: 30vw }
  .telefone img:nth-child(2) { margin-bottom: var(--space-lg) }
}
.usps-weiss{background:var(--color-white)}