/**
 * ClouSo – gemeinsame Styles für alle Seiten
 * Pfade relativ zu dieser Datei (css/main.css)
 */

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/magistral/25B3C3_0_0.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/magistral/25B359_0_0.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #f8fafc;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../img/back.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

/* Index: Karten-Hover & Scroll-Animation */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

html {
  scroll-behavior: smooth;
}

/* CashTill: FAQ Ausklapp-Elemente */
.faq-details {
  border-bottom: 1px solid #e2e8f0;
}

.faq-details:first-of-type {
  border-top: 1px solid #e2e8f0;
}

.faq-details summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 2.5rem 1rem 0;
  position: relative;
  font-weight: 600;
  color: #0f172a;
}

.faq-details summary::-webkit-details-marker {
  display: none;
}

.faq-details summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-60%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-details[open] summary::after {
  transform: translateY(-40%) rotate(-135deg);
}

.faq-details .faq-answer {
  padding: 0 0 1.25rem 0;
  color: #475569;
}