/* Seiteneigene Ergänzungen für webseiten-erstellung.html — nutzt so viel wie möglich
   aus styles.css (eyebrow, hero-badge, section-head, values-grid, value-card, betreuung,
   btn-accent …) und ergänzt hier nur, was es dort noch nicht gibt: den einspaltigen
   Hero (kein Zwei-Spalten-Panel wie auf der Startseite) sowie die Ablauf-Schritte und
   FAQ-Liste dieser Seite. */

.ws-hero {
  background: linear-gradient(155deg, var(--color-navy) 0%, var(--color-navy-2) 60%, #1f3766 100%);
  position: relative;
  overflow: hidden;
  padding: 84px 0 64px;
}
.ws-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.ws-hero .container { position: relative; z-index: 1; }
.ws-hero .eyebrow { background: rgba(255, 255, 255, 0.1); color: #dbe6ff; }
.ws-hero h1 { color: #fff; max-width: 760px; }
.ws-lead { color: #dbe6ff; font-size: 1.1rem; max-width: 620px; margin: 18px 0 0; }

/* .values-grid ist auf der Startseite für 4 Karten gebaut (repeat(4,1fr)) — hier sind
   es nur 3, wodurch sie sonst linksbündig in einem leeren 4-Spalten-Raster hängen statt
   zentriert dazustehen. Eigene 3-Spalten-Regel statt der geerbten 4er-Aufteilung. */
.ws-benefits-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .ws-benefits-grid { grid-template-columns: 1fr; }
}

/* Ablauf-Schritte: vier gleich aufgebaute Blöcke, große Nummer als visueller Anker —
   gleiche "Struktur zeigt eine echte Reihenfolge"-Logik wie im Rest der Seite, hier
   tatsächlich ein Ablauf mit fester Reihenfolge, also inhaltlich gerechtfertigt. */
.ws-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.ws-step-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--color-blue-light);
  -webkit-text-stroke: 1.5px var(--color-navy);
  margin-bottom: 10px;
}
.ws-step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.ws-step p { color: var(--color-text-soft); font-size: 0.88rem; margin: 0; }

/* Der Chat-Verlauf steckte zunächst in mehreren CSS-nachgebauten Geräte-Rahmen — ein
   Laptop mit Browserleiste (sah aus wie ein Browserfenster, nicht wie ein Gerät), ein
   einfarbiger Kasten ("nicht authentisch, hässlich"), ein silberner und dann ein
   dunkler Graphit-Rand per Gradient — alle der Reihe nach vom Nutzer verworfen. Wie
   auf referenzen.html (siehe dort .device-real/.device-real-frame/.device-real-screen
   in styles.css) inzwischen die endgültige Lösung: ein echtes Geräte-Mockup-Foto
   (img/macbook-cropped.png, dasselbe wie im Responsive-Demo dort) statt jedem
   weiteren CSS-Nachbau — hier zeigt der Bildschirm aber keine echte Website per
   iframe, sondern direkt den Chat-Verlauf. .device-real-screen kommt komplett aus
   styles.css (Positionierung/Maskierung), .ws-faq-device-screen füllt diese Fläche
   nur noch aus und übernimmt Innenabstand + eigenes internes Scrollen, falls der
   Verlauf höher wird als der sichtbare Bildschirmausschnitt. */
/* Größer als vorher (760px) -- jetzt, wo die Mobile-Ansicht ein eigenes Akkordeon hat
   (siehe .ws-faq-device/.ws-faq-accordion unten), muss dieses Foto nicht mehr auch auf
   schmalen Bildschirmen funktionieren und darf auf dem Desktop entsprechend mehr Raum
   einnehmen. */
.device-real-faq { width: 940px; max-width: 100%; margin: 0 auto; }
.device-real-faq .device-real-screen {
  /* Gleiche Aussparung wie beim Macbook-Mockup auf referenzen.html (macbook-cropped.png,
     1860×1109): left 11.77% · right 11.77% · top 7.12% · bottom 12.71% — korrigiert,
     siehe ausführlicher Kommentar zum echten Überlauf-Bug bei .device-real-desktop
     .device-real-screen in styles.css (weicher Verlaufsrand im Foto, ursprünglicher
     Schwellenwert viel zu großzügig). */
  left: 11.77%; right: 11.77%; top: 7.12%; bottom: 12.71%;
}
.ws-faq-device-screen {
  position: absolute;
  inset: 0;
  padding: 28px 24px;
  overflow-y: auto;
}
/* Ab hier: Sichtbarkeit Chat-Mockup vs. Akkordeon. Das Macbook-Foto wird unterhalb von
   780px zu klein/eng, um darin bequem zu lesen (siehe CLAUDE.md-Historie) — auf Mobile
   zeigt .ws-faq-accordion daher eine normale aufklappbare Liste (natives <details>/
   <summary>, kein JS nötig) mit demselben Fragetext, .ws-faq-device (das Chat-Mockup)
   ist dort ausgeblendet. Beide Blöcke stehen mit identischem Inhalt parallel im HTML;
   rein CSS-gesteuert, kein JS muss zur Laufzeit zwischen ihnen umschalten. */
.ws-faq-accordion { display: none; }
@media (max-width: 780px) {
  .ws-faq-device { display: none; }
  .ws-faq-accordion { display: block; max-width: 640px; margin: 0 auto; }
}
.ws-faq-acc-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 4px 20px;
  margin-bottom: 12px;
}
.ws-faq-acc-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.ws-faq-acc-item summary::-webkit-details-marker { display: none; }
.ws-faq-acc-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-green-dark);
}
.ws-faq-acc-item[open] summary::after { content: '\2013'; }
.ws-faq-acc-item p {
  margin: 0 0 18px;
  color: var(--color-text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* FAQ-Mockup als Chat-Bubble-Verlauf (Desktop, siehe oben) — Frage rechts (wie vom
   Kunden gestellt), Antwort links, je mit Absender-Label wie in einem WhatsApp-
   Gruppenchat. Anders als ein Akkordeon/Tabs/Karten-Raster für DIESEN Zweck (ein
   simuliertes Gespräch) hat das kein Problem mit sehr unterschiedlich langen
   Antworten: jede Blase ist für sich, eine lange Antwort bläht nur ihre eigene Blase
   auf. Das schließt ein normales Akkordeon nicht grundsätzlich aus — auf Mobile ist es
   oben genau deshalb wieder im Einsatz, nur eben als eigenständige, einfachere
   Darstellung statt als Chat-Simulation. */
.ws-faq-thread { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* Echte Chat-Simulation statt generischem Seiten-Einblendeffekt (der wirkte trotz
   Staffelung wie ein normales .reveal-Aufblitzen, nicht wie ein Gespräch): JS spielt
   die Nachrichten mit spürbaren Pausen nacheinander ab (siehe script.js,
   playFaqChatSequence) und zeigt vor JEDER Nachricht — Frage wie Antwort — kurz drei
   tippende Punkte, bevor deren Blase erscheint (auch der Kunde muss seine Frage ja
   erst tippen, nicht nur EDV-Fuzzis die Antwort) — beides nur über Klassen gesteuert,
   hier nur die reinen Zustände. */
.ws-faq-row {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ws-faq-row.is-typing, .ws-faq-row.is-shown { opacity: 1; transform: translateY(0); }
.ws-faq-row.q { justify-content: flex-end; }
.ws-faq-row.a { justify-content: flex-start; }
.ws-faq-msg { display: flex; flex-direction: column; max-width: 78%; }
.ws-faq-row.q .ws-faq-msg { align-items: flex-end; }
.ws-faq-row.a .ws-faq-msg { align-items: flex-start; }
.ws-faq-sender {
  font-size: 0.72rem;
  font-weight: 700;
  margin: 0 6px 4px;
}
.ws-faq-row.q .ws-faq-sender { color: var(--color-navy); }
.ws-faq-row.a .ws-faq-sender { color: var(--color-green-dark); }
.ws-faq-bubble {
  padding: 16px 20px;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.ws-faq-row.q .ws-faq-bubble {
  background: var(--color-navy);
  color: #fff;
  border-bottom-right-radius: 4px;
  font-weight: 600;
  font-family: var(--font-body);
  display: none;
}
.ws-faq-row.a .ws-faq-bubble {
  background: var(--color-surface);
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
  display: none;
}
.ws-faq-row.is-shown .ws-faq-bubble { display: block; }
/* Tipp-Punkte-Blase: bei beiden Seiten gleich hell/neutral gehalten (wie bei den
   meisten Messengern üblich), nur die Ecke ist je nach Seite passend abgerundet, damit
   sie optisch am richtigen Ende "andockt". */
.ws-faq-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
}
.ws-faq-row.a .ws-faq-typing { border-bottom-left-radius: 4px; }
.ws-faq-row.q .ws-faq-typing { border-bottom-right-radius: 4px; }
.ws-faq-row.is-typing .ws-faq-typing { display: flex; }
.ws-faq-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text-soft);
  animation: wsFaqTypingBounce 1s infinite ease-in-out;
}
.ws-faq-typing span:nth-child(2) { animation-delay: 0.15s; }
.ws-faq-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wsFaqTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-faq-typing span { animation: none; }
}
@media (max-width: 560px) {
  .ws-faq-msg { max-width: 92%; }
}

@media (max-width: 900px) {
  .ws-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ws-hero { padding: 56px 0 48px; }
  .ws-steps { grid-template-columns: 1fr; }
}