/*=============== FAQ-KACHELN (messingdrehteile, en/brass-turned-parts) ===============
   Kachel: heller Tint der Hausfarbe, Frage im Headline-Blau.
   Antwort: Fläche in der Hausfarbe blendet sich über die Kachel ein –
   Desktop bei Hover/Tastaturfokus, Touch per Tippen (.is-open, js/faq-tiles.js). */

.faq-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-auto-rows: 1fr; /* alle Zeilen so hoch wie die höchste Kachel */
   gap: 16px;
   width: 70%;
   margin: 0 auto;
}

/* Button und Antwort liegen in derselben Grid-Zelle: die (unsichtbare)
   Antwort zählt für die Höhe mit, die Kachel ist so hoch wie der längere
   der beiden Inhalte – und über grid-auto-rows alle Kacheln gleich hoch. */
.faq-tile {
   position: relative;
   display: grid;
   background-color: #ffedf8;
   background-color: color-mix(in srgb, var(--pink-color) 7%, #fff);
   border-radius: 4px;
   overflow: hidden;
}

.faq-tile > .faq-card,
.faq-tile > .faq-card__answer {
   grid-area: 1 / 1;
}

/* globale button-Regeln (styles.css, form.css) neutralisieren */
.faq-card {
   width: 100%;
   height: auto;
   border: none;
   border-radius: 0;
   padding: 30px 30px 72px;
   background: none;
   font: inherit;
   text-align: left;
   cursor: pointer;
   display: flex;
   align-items: flex-start;
}

.faq-card:hover {
   transform: none;
   opacity: 1;
}

.faq-card:focus-visible {
   outline: none; /* Rahmen sitzt an der Kachel, s. u. */
}

.faq-card__q {
   font-family: var(--body-font), sans-serif;
   font-size: 1.5rem;
   line-height: 1.25;
   font-weight: 700;
   color: #022640;
}

/* Antwortfläche: liegt deckungsgleich über der Kachel, nur Opacity wechselt */
.faq-card__answer {
   z-index: 1;
   display: flex;
   align-items: flex-start;
   padding: 30px 30px 72px;
   background-color: var(--pink-color);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.4s ease-out;
}

.faq-card__answer p {
   color: #fff;
   font-size: 1.05rem;
   line-height: 1.55;
   letter-spacing: 0;
   opacity: 0;
   transition: opacity 0.4s ease-out;
}

/* „+“ / „–“ aus zwei Balken; liegt über beiden Flächen */
.faq-card__icon {
   position: absolute;
   right: 30px;
   bottom: 30px;
   z-index: 2;
   width: 22px;
   height: 22px;
   color: var(--pink-color);
   pointer-events: none;
   transition: color 0.4s ease-out;
}

.faq-card__icon::before,
.faq-card__icon::after {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   width: 100%;
   height: 2px;
   margin-top: -1px;
   background-color: currentColor;
   border-radius: 1px;
}

/* senkrechter Balken des „+“: blendet aus → „–“ */
.faq-card__icon::after {
   transform: rotate(90deg);
   transition: opacity 0.4s ease-out;
}

/*--------------- Offen: Tastaturfokus, Touch (.is-open), Hover (nur echte Maus) ---------------*/

.faq-tile.is-open .faq-card__answer,
.faq-tile:has(.faq-card:focus-visible) .faq-card__answer {
   opacity: 1;
}

.faq-tile.is-open .faq-card__answer p,
.faq-tile:has(.faq-card:focus-visible) .faq-card__answer p {
   opacity: 1;
   transition-delay: 0.08s;
}

.faq-tile.is-open .faq-card__icon,
.faq-tile:has(.faq-card:focus-visible) .faq-card__icon {
   color: #fff;
}

.faq-tile.is-open .faq-card__icon::after,
.faq-tile:has(.faq-card:focus-visible) .faq-card__icon::after {
   opacity: 0;
}

/* Tastaturfokus: Rahmen außen um die Kachel */
.faq-tile:has(.faq-card:focus-visible) {
   outline: 3px solid #022640;
   outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
   .faq-tile:hover .faq-card__answer {
      opacity: 1;
   }

   .faq-tile:hover .faq-card__answer p {
      opacity: 1;
      transition-delay: 0.08s;
   }

   .faq-tile:hover .faq-card__icon {
      color: #fff;
   }

   .faq-tile:hover .faq-card__icon::after {
      opacity: 0;
   }
}

/*--------------- Responsive ---------------*/

@media screen and (max-width: 1023px) {
   .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 90%; }
}

@media screen and (max-width: 768px) {
   .faq-grid { grid-template-columns: minmax(0, 1fr); width: 80%; gap: 12px; }
   .faq-card,
   .faq-card__answer { padding: 24px 24px 64px; }
   .faq-card__q { font-size: 1.25rem; }
   .faq-card__icon { right: 24px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
   .faq-card__answer,
   .faq-card__answer p,
   .faq-card__icon,
   .faq-card__icon::after {
      transition: none !important;
   }
}