ok, manchmal sieht man den wald vor bäumen nicht, besonders wenn man keine erfahrung mit css hat. aber das wird schon noch bis zur rente 
jedenfalls nochmals ein ganz herzliches danke .
ich hab das mit deinem code nochmal ausprobiert, ganz lustig weil ich dann plötzlich keine farbe mehr hatte und der ganze text sooooooo winzig war. 
warum auch immer. sie sind jetzt zumindest gleich hoch. 
und in farbe und bunt.
sollte ich wieder irgendwo hängen melde ich mich wieder 
Danke, ich glaube so sollte es gehen.
nur bekomm ich die boxen nicht gleich. die linke und die mittlere sollten per css ident sein , aber die mittlere will einfach nicht höher werden.
und dann noch das CSS:
/* 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;
}Sempervivum ich danke dir für deine geduld.
<!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>© 2025Alle Rechte vorbehalten.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>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.
sorry und danke, ich werdnoch mal von vorn anfangen und dann das projekt hier noch mal posten wenn ich wieder anstehe. 
hab mal als zip hochgeladen
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?
tk1234 super, danke. Genau das was ich brauche.
😃👍🍺
Hallo
Ich möchte auf meiner Webseite ein faq einrichten.
Und zwar so wie auf dieser Seite unter kundendienst:
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.