ich danke dir für deine geduld.
Da nicht für, Geduld gehört dazu beim Programmieren.
Das Layout, dass dein HTML und CSS ergibt, sah ein wenig wild aus. Ich habe mich mal nach dem Bild in Posting #9 gerichtet und die Elemente so angeordnet. Zu viel um alles zu erklären, ich habe u. a. überflüssige Container entfernt.
Bei den Pfeilen des summary-details hast Du mit abs. Positionierung gearbeitet und dabei haben sich gleich die Nachteile offenbart: Element überlappen sich. Du kannst den Text und den Pfeil sehr gut mit Flexlayout neben einander anordnen.
Code
<body>
<header class="header">
<div class="container">
<h1>Testseite</h1>
<h2 class="special-heading">Testseite erklärung</h2>
<p>
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor
</p>
<p> incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.”
</p>
</div>
</header>
<main class="main-content">
<section class="call-to-action">
<h2>Kontaktieren Sie uns noch heute!</h2>
<p>Nutzen Sie unser Formular oder rufen Sie uns direkt an.</p>
<p>
Für ein persönliches Gespräch erreichen Sie uns Montag bis Freitag
von 00:00 bis 24:00 Uhr
</p>
</section>
<section class="contact-form-container">
<h3>Kontaktformular</h3>
<form id=" contactForm" class="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="message">Nachricht</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn">Nachricht senden</button>
</form>
<div id="formStatus" class="form-status"></div>
</section>
<section class="call-button-container">
<h3>Direkt anrufen</h3>
<a href="tel:+49123456789" class="btn call-btn">
<span class="icon">📞</span> Jetzt anrufen!
</a>
<p>+49 123 456789</p>
</section>
<section class="faq-section">
<h1>ANTWORTEN AUF HÄUFIG GESTELLTE FRAGEN</h1>
<div>
<details name="acc">
<summary>Frage?</summary>
<div class="content">
<p>Antwort</p>
</div>
</details>
<details name="acc">
<summary>Frage</summary>
<div class="content">
<p>Antwort </p>
</div>
</details>
<details name="acc">
<summary>Frage </summary>
<div class="content">
<p>Antwort</p>
</div>
</details>
</div>
<details name="acc">
<summary>Frage</summary>
<div class="content">
<p>Antwort</p>
</div>
</details>
<!-- Mehr summary-details-Elemente -->
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2025Alle Rechte vorbehalten.</p>
</div>
</footer>
</body>