Und 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;
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.
