/* =========================================================================
   Produktseite — nur von produkt.html geladen.
   Nutzt die Tokens und Grundklassen aus style.css.
   ========================================================================= */

/* ---------- Hero ---------- */
.prod-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}


/* ---------- Screenshot-Platzhalter ----------
   Zeigt über data-shot, welches Bild an diese Stelle gehört. Fällt bewusst
   auf, solange die echten Screenshots fehlen. */
.prod-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-field);
  border: 2px dashed #B9B8C6;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.prod-shot::before {
  content: attr(data-shot);
  max-width: 34ch;
  text-align: center;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .85rem;
  line-height: 1.5;
  color: #6B6A7A;
}
.prod-shot--wide { aspect-ratio: 16 / 8; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.prod-shot--portrait { aspect-ratio: 4 / 5; }
.prod-shot--tile { aspect-ratio: 4 / 3; border-width: 1px; padding: 1rem; }
.prod-shot--tile::before { font-size: .75rem; }

/* ---------- Funktionsabschnitte ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
/* Bild links, Text rechts — im Wechsel für Rhythmus über die lange Seite */
.feature--reverse .feature__text { order: 2; }

.feature__num {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--c-blue);
  opacity: .5;
  margin-bottom: .75rem;
}
.feature__num--center { text-align: center; }
.feature__lead { margin-top: clamp(1rem, .7rem + 1.2vw, 1.75rem); }

/* Leicht abgesetzter Hintergrund, damit zwei helle Abschnitte nicht verschmelzen */
.feature-alt { background: #F7F7FA; }

/* ---------- Funktion / Vorteil / Nutzen ---------- */
.fvn {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .6rem 1.25rem;
  font-size: .95em;
}
.fvn dt {
  font-weight: 700;
  color: var(--c-indigo);
  white-space: nowrap;
}
.fvn dd { margin: 0; }

/* ---------- Schaubild ---------- */
.flow {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.5vw, 2rem);
}
.flow__step {
  position: relative;
  border: 1px solid var(--c-hairline-lt);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: rgba(255, 255, 255, .04);
}
/* Pfeil zwischen den Stufen; beim letzten Schritt entfällt er */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: calc(clamp(1rem, .6rem + 1.5vw, 2rem) / -2 - .5rem);
  width: 1rem; height: 1rem;
  transform: translateY(-50%);
  background: var(--c-blue);
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="black" stroke-width="2.5"><path d="M20.6 11H2M11.6 2 20.6 11l-9 9"/></svg>');
}
.flow__num {
  font-family: var(--f-head); font-weight: 600;
  font-size: 1.5rem; line-height: 1;
  color: var(--c-blue);
  margin-bottom: .5rem;
}
.flow__title { font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.flow__text { margin-top: .5rem; font-size: .9em; font-weight: 300; }

.flow__ai {
  margin-top: clamp(1rem, .6rem + 1.5vw, 2rem);
  border: 1px dashed var(--c-purple);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  text-align: center;
}
.flow__ai .flow__title { color: var(--c-purple); }

/* ---------- Tabelle ---------- */
.table-wrap { overflow-x: auto; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.prod-table { width: 100%; border-collapse: collapse; min-width: 34rem; text-align: left; }
.prod-table th, .prod-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
}
.prod-table thead th {
  background: var(--c-indigo);
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .9em;
}
.prod-table tbody th { font-weight: 700; white-space: nowrap; width: 1%; }


/* ---------- FAQ ---------- */
.faq { max-width: 52rem; }
.faq__item {
  border-bottom: 1px solid var(--c-hairline);
  padding: 1.1rem 0;
}
.faq__item:first-of-type { border-top: 1px solid var(--c-hairline); margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  padding-right: 2.5rem;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute; right: 0; top: .2em;
  width: 1.1rem; height: 1.1rem;
  background: var(--c-indigo);
  transition: transform .2s ease;
  -webkit-mask: var(--chev) center / contain no-repeat;
          mask: var(--chev) center / contain no-repeat;
  --chev: url('data:image/svg+xml;utf8,<svg 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"><path d="m5 9 7 7 7-7"/></svg>');
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item p { margin-top: .9rem; max-width: 62ch; }

/* ---------- Schmalere Viewports ---------- */
@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bei zwei Spalten zeigt der Pfeil am Zeilenende in die Irre */
  .flow__step:nth-child(2n)::after { display: none; }
}

@media (max-width: 768px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  /* Bild immer unter den Text, unabhängig von der Wechselrichtung */
  .feature--reverse .feature__text { order: 0; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__step::after { display: none; }
  .fvn { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .fvn dd { margin-bottom: .8rem; }
  .prod-hero__ctas .btn { width: 100%; }
}

/* ---------- Echte Screenshots ----------
   Rahmen und Schatten heben die App optisch vom Seitenhintergrund ab. */
.prod-img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-hairline);
  box-shadow: 0 14px 40px rgba(11, 10, 20, .18);
}
.prod-img--tile { box-shadow: none; }

.prod-img__note {
  margin-top: .6rem;
  font-size: .8rem;
  font-weight: 300;
  font-style: italic;
  color: #6B6A7A;
}

/* ---------- Gestapelte Abschnitte ----------
   Dichte App-Oberflächen brauchen die volle Breite: in der halben Spalte
   schrumpft die Schrift der App auf wenige Pixel und wird unlesbar.
   Der Text bleibt schmal genug zum Lesen, das Bild nutzt die ganze Breite. */
.feature--stacked .feature__text {
  max-width: 62rem;
  margin-inline: auto;
}
.feature--stacked .prod-img,
.feature--stacked .prod-shot {
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}
.feature--stacked .prod-shot { aspect-ratio: 16 / 9; }

/* Hochformat-Foto in der zweispaltigen Anordnung */
.prod-img--portrait { aspect-ratio: 824 / 885; object-fit: cover; }