/* ============================================ FAQ-Sektion – Fliesen Dillinger Einbinden im mit: ============================================ */ /* Goldener Akzentstreifen */ #faq .faq-accent { display: inline-block; width: 40px; height: 3px; background: #73a28b; border-radius: 2px; margin-bottom: 1.2rem; } /* Abschnitts-Überschrift */ #faq h2 { font-size: 1.8rem; font-weight: 600; margin: 0 0 0.4rem 0; color: #1a1a1a; } /* Untertitel unter der Überschrift */ #faq .faq-subtitle { font-size: 1rem; color: #666; margin: 0 0 2rem 0; } /* Gesamtcontainer der Liste */ #faq { max-width: 860px; margin: 4rem auto; padding: 0 1.5rem; } /* Trennlinie oben */ .faq-list { border-top: 1px solid #e0e0e0; } /* Einzelnes FAQ-Element */ .faq-item { border-bottom: 1px solid #e0e0e0; } /* Klickbarer Bereich (Frage + Icon) */ .faq-btn { width: 100%; background: none; border: none; padding: 1.2rem 0.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; text-align: left; } /* Fragetext */ .faq-question { font-size: 1rem; font-weight: 600; color: #1a1a1a; line-height: 1.4; } /* Plus/Kreuz-Icon rechts */ .faq-icon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #73a28b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s ease; } .faq-icon span { font-size: 18px; font-weight: 400; color: #73a28b; line-height: 1; display: block; transition: transform 0.3s ease, color 0.2s ease; } /* Icon-Zustand wenn geöffnet */ .faq-item.open .faq-icon { background: #73a28b; } .faq-item.open .faq-icon span { color: white; transform: rotate(45deg); } /* Antwort-Container – eingeklappt */ .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } /* Antwort-Container – ausgeklappt */ .faq-item.open .faq-body { max-height: 300px; } /* Antworttext */ .faq-body p { font-size: 0.97rem; color: #555; line-height: 1.75; margin: 0; padding: 0.2rem 0.2rem 1.3rem; } /* Links im Antworttext */ .faq-body a { color: #73a28b; text-decoration: none; font-weight: 600; } .faq-body a:hover { text-decoration: underline; } /* Hover-Effekt auf Frage */ .faq-btn:hover .faq-question { color: #73a28b; transition: color 0.2s ease; } /* Mobile Anpassung */ @media (max-width: 600px) { #faq { padding: 0 1rem; margin: 2.5rem auto; } #faq h2 { font-size: 1.4rem; } .faq-question { font-size: 0.95rem; } }