Aufklappender menüpunkt

ksalat

Hallo

Ich möchte auf meiner Webseite ein faq einrichten.

Und zwar so wie auf dieser Seite unter kundendienst:

Benötigen Sie Unterstützung zu Ihrer ECCO Bestellung, Bezahlung, Versand oder Rücksendungen? Unser Kundenservice hilft Ihnen gerne. Erhalten Sie Antworten.

at.ecco.com

Neben dem Text ist ein Pfeil, klickt man drauf erweitert sich das Feld nach unten.

Klickt man wieder drauf, wird das Feld wieder klein.

Ich hab das mit der FAQ schon als pop-up versucht, aber das wirkt für mich zu verwirrend. Deswegen möchte ich das gern als aufklapendes/vergrösserndes feld versuchen.

Vielleicht gibt s ja schon einen entsprechenden Beitrag, da ich aber keine ahnung hab wie das heisst hab ich leider nichts passendes gefunden.

tk1234

Zitat von ksalat

Vielleicht gibt s ja schon einen entsprechenden Beitrag, da ich aber keine ahnung hab wie das heisst hab ich leider nichts passendes gefunden.

Da wurde anscheinend das Verhalten des details-Element nachgebaut - das geht mit dem Original aber einfacher …

ksalat

tk1234 super, danke. Genau das was ich brauche.

😃👍🍺

ksalat

ich habe jetzt alles eingegeben und jetzt hab ich das problem das wenn ich das akkordeon aufklappe sich das ganze design verschiebt.

gestaffelt ist das : oben Head bereich, dann drei säulen nebeneinander, unten foot bereich.

klicke ich auf einen punkt im akkordeon klappt der sich wohl auf aber die anderen kasteln verschieben sich nach oben und unten. muss ich da noch irgendwas fixieren?

Sempervivum

Um dieses Problem zu lösen müsste man das Ganze im Zusammenhang sehen. Poste das HTML und CSS oder am besten die URL der Seite.

ksalat

hab mal als zip hochgeladen

Sempervivum

Da finde ich zwar in script.js Code für Popups aber leider kein HTML.

Außerdem wird im Javascript mit getElementById gearbeitet, deshalb wird das JS nur für ein Akkordeon funktionieren.

ksalat

sorry und danke, ich werdnoch mal von vorn anfangen und dann das projekt hier noch mal posten wenn ich wieder anstehe.

ksalat

so sollte das mal asschauen. mal abgesehen das die drei container nicht die selbe höhe haben, habe ich auch noch das problem das wenn ich ganz rechts (da wo der text reinkommt) mein akkordeonmenü mache, mir das ganze design aufgelöst wird. sprich: die drei felder sind plötzlich untereinander.

maske.jpg

Sempervivum

Ich wiederhole mich ungern, aber:

Zitat

Poste das HTML und CSS oder am besten die URL der Seite.

D. h. das neueste mit deinem Versuch, die Accordeons einzubauen. Ohne das kann man dir nicht weiter helfen.

ksalat

Sempervivum ich danke dir für deine geduld.

HTML

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Moderne Landingpage</title>
        <link rel="stylesheet" href="styles.css" />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
    </head>
    <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> 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">
            <div class="container">
                <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-section">
                    <div 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>
                    </div>

                    <div 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>
                    </div>

                    <div class="faq-section">
                        <p>
                           <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>

<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>
	
	<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>
                </section>
            </div>
        </main>

        <footer class="footer">
            <div class="container">
                <p>&copy; 2025Alle Rechte vorbehalten.</p>
            </div>
        </footer>

        <script src="script.js"></script>
    </body>
</html>

Alles anzeigen

ksalat

und dann noch das CSS:

Code

/* Grundlegende Stile */
:root {
    --primary-color: #ffa800;
    --secondary-color: #f4f7fa;
    --text-color: #333;
    --white: #fff;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--secondary-color);
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: var(--primary-color);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
}

.header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.special-heading {
  font-size: 1em;
  font-family: 'Arial', sans-serif;
  color: purple;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
   padding-bottom: 50px;
}

.header p {
    font-size: 1.2rem;
}

/* Hauptinhalt */
.main-content {
    padding: 60px 0;
}

.call-to-action {
    text-align: center;
    margin-bottom: 30px;
}

.call-to-action h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.contact-section {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-form-container,
.call-button-container {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    flex: 1;
    min-width: 300px;
}

.contact-section h3 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--primary-color);
}

/* Formular-Styling */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Button-Styling */
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    width: 100%;
    text-align: center;
}

.btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

/* Anruf-Button */
.call-button-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.call-btn {
        text-align: center;
    margin-bottom: 25px;
    margin-top: 20px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.call-btn .icon {
    font-size: 1.5rem;
}

.call-button-container {
    margin-top: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Formular-Status-Nachrichten */
.form-status {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
}

.form-status.success {
    color: green;
}

.form-status.error {
    color: red;
}

.faq-section {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
     width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
    background: var(--white);
    box-shadow: var(--box-shadow);
    flex: 1;
    min-width: 300px;
}

.faq-item {
    margin-bottom: 10px;
}

/*.faq-question {
    display: block; /* or inline-block 
    padding: 10px;
    background-color: #f0f0f0;A
    border: 1px solid #ccc;
    text-decoration: none; /* Entfernt Unterstreichung 
    color: #333; /* Textfarbe 
    transition: background-color 0.3s ease;  /*Hover-Effekt 
}*/

.faq-question:hover {
    background-color: #e0e0e0;
}

/* Footer */
.footer {
    background: var(--text-color);
    color: var(--white);
    text-align: center;
    padding: 20px 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  display: none; /* Zuerst ausgeblendet */
  justify-content: center;
  align-items: center;
}

.popup {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#closePopup {
  margin-top: 10px;
}

.overlay.show {
  display: flex; /* Popup anzeigen */
}

/* Responsivität für kleinere Bildschirme */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column;
        gap: 20px;
    }
}


details > div {
	padding: .5em;
}

details {
	border: thin solid;
}

summary {
	position: relative;
	line-height: 300%;
	padding-left: 1em;
	font-weight: bold;
}

summary::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E");
	position: absolute;
	width: 1em;
	aspect-ratio: 1;
	right: 1em;
	top: .2em;
	transition: all 0.5s;
}

details[open] summary::after {
	transform: scale(1, -1);
	filter: hue-rotate(250deg)
}

@media (min-width: 30em) {
	body {
		max-width: 50em;
		display: grid;
		grid-template-columns: 24em 1fr;
		gap: 1em;
	}
}

h1 {
	grid-column: 1 / -1;
    
    
}


details > div {
	padding: .5em;
}

details {
	border: thin solid;
}

summary {
	position: relative;
	line-height: 300%;
	padding-left: 1em;
	font-weight: bold;
}

summary::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E");
	position: absolute;
	width: 1em;
	aspect-ratio: 1;
	right: 1em;
	top: .2em;
	transition: all 0.5s;
}

details[open] summary::after {
	transform: scale(1, -1);
	filter: hue-rotate(250deg)
}

@media (min-width: 30em) {
	body {
		max-width: 50em;
		display: grid;
		grid-template-columns: 24em 1fr;
		gap: 1em;
	}
}

h1 {
	grid-column: 1 / -1;
}

Alles anzeigen

Sempervivum

Zitat

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>&copy; 2025Alle Rechte vorbehalten.</p>
        </div>
    </footer>
</body>

Alles anzeigen

Sempervivum

Und das CSS:

Code

        /* Grundlegende Stile */
        :root {
            --primary-color: #ffa800;
            --secondary-color: #f4f7fa;
            --text-color: #333;
            --white: #fff;
            --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--secondary-color);
        }

        .container {
            max-width: 1100px;
            margin: auto;
            padding: 0 20px;
        }

        /* Header */
        .header {
            background: var(--primary-color);
            color: var(--white);
            padding: 60px 0;
            text-align: center;
        }

        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .special-heading {
            font-size: 1em;
            font-family: 'Arial', sans-serif;
            color: purple;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: bold;
            padding-bottom: 50px;
        }

        .header p {
            font-size: 1.2rem;
        }

        /* Hauptinhalt */
        .main-content {
            padding: 60px 0;
            display: grid;
            grid-template-columns: 1fr;
        }

        .call-to-action {
            text-align: center;
            margin-bottom: 30px;
        }

        .call-to-action h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .contact-section {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .contact-form-container,
        .call-button-container {
            background: var(--white);
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
        }

        .contact-section h3 {
            text-align: center;
            margin-bottom: 25px;
            color: var(--primary-color);
        }

        /* Formular-Styling */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        /* Button-Styling */
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--white);
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            width: 100%;
            text-align: center;
        }

        .btn:hover {
            background: #0056b3;
            transform: translateY(-2px);
        }

        /* Anruf-Button */
        .call-button-container {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        .call-btn {
            text-align: center;
            margin-bottom: 25px;
            margin-top: 20px;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .call-btn .icon {
            font-size: 1.5rem;
        }

        .call-button-container {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        /* Formular-Status-Nachrichten */
        .form-status {
            margin-top: 20px;
            text-align: center;
            font-weight: 600;
        }

        .form-status.success {
            color: green;
        }

        .form-status.error {
            color: red;
        }

        .faq-section {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
            background: var(--white);
            box-shadow: var(--box-shadow);
        }

        .faq-item {
            margin-bottom: 10px;
        }

        /*.faq-question {
    display: block; /* or inline-block 
    padding: 10px;
    background-color: #f0f0f0;A
    border: 1px solid #ccc;
    text-decoration: none; /* Entfernt Unterstreichung 
    color: #333; /* Textfarbe 
    transition: background-color 0.3s ease;  /*Hover-Effekt 
}*/

        .faq-question:hover {
            background-color: #e0e0e0;
        }

        /* Footer */
        .footer {
            background: var(--text-color);
            color: var(--white);
            text-align: center;
            padding: 20px 0;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            /* Halbtransparenter Hintergrund */
            display: none;
            /* Zuerst ausgeblendet */
            justify-content: center;
            align-items: center;
        }

        .popup {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        #closePopup {
            margin-top: 10px;
        }

        .overlay.show {
            display: flex;
            /* Popup anzeigen */
        }

        /* Responsivität für kleinere Bildschirme */
        @media (max-width: 768px) {
            .contact-section {
                flex-direction: column;
                gap: 20px;
            }
        }


        /* details>div {
            padding: .5em;
        }

        details {
            border: thin solid;
        }

        summary {
            position: relative;
            line-height: 300%;
            padding-left: 1em;
            font-weight: bold;
        }

        summary::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E");
            position: absolute;
            width: 1em;
            aspect-ratio: 1;
            right: 1em;
            top: .2em;
            transition: all 0.5s;
        }

        details[open] summary::after {
            transform: scale(1, -1);
            filter: hue-rotate(250deg)
        } */

        details>div {
            padding: .5em;
        }

        details {
            border: thin solid;
        }

        summary {
            /* position: relative; */
            /* line-height: 300%; */
            padding-left: 1em;
            font-weight: bold;
            display: flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.3em 0.2em 0.3em 0.2em;
            gap: 0.2em;
        }

        summary::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E");
            /* position: absolute; */
            width: 1em;
            aspect-ratio: 1;
            transform: translateY(0.1em);
            /* right: 1em;
            top: .2em; */
            transition: all 0.5s;
        }

        details[open] summary::after {
            transform: scale(1, -1);
            filter: hue-rotate(250deg)
        }

        body {
            display: flex;
            flex-direction: column;
        }

        main.main-content {
            grid-template-columns: 1fr;
        }

        @media (min-width: 50em) {
            body {
                margin: 0 auto;
                max-width: 50em;
                gap: 1em;
            }

            main.main-content {
                grid-template-columns: 1fr 1fr 1fr;
            }

            .call-to-action {
                grid-column: 1/4;
            }

Alles anzeigen

Da war einiges doppelt und evtl. müsste noch mehr bereinigt werden aber mir fehlte die Zeit.

Die FAQ-Elemente sind jetzt recht klein. Wenn da Inhalt rein kommt, könnte es zu Schwierigkeiten kommen.

Und Du hattest geschrieben, dass sich alles verschiebt, wenn man ein Akkordeon auf klappt. Das ist bei meiner Lösung auch so. Will man das vermeiden, müsste man die z. B. die Höhe begrenzen und den Overflow sichtbar machen. Aber dann wird es wahrscheinlich Probleme geben, wenn man ein Element ganz unten auf klappt.

Jetzt mitmachen!