Häufig gestellte Fragen (FAQ)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stash Box FAQ</title>
<style>
/* Seiten-Gesamtstil */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background: #fffdf8; /* Haupt-Hintergrundfarbe der Homepage vereinheitlichen */
color: #333;
}
.container {
max-width: 900px;
margin: 50px auto;
padding: 0 20px;
}
h1 {
text-align: center;
margin-bottom: 10px;
font-size: 2rem;
color: #1a1a1a;
}
p.intro {
text-align: center;
margin-bottom: 40px;
font-size: 1.1rem;
color: #555;
}
/* Kategorietitel */
.faq-category {
margin-bottom: 40px;
}
.faq-category h2 {
margin-bottom: 20px;
border-bottom: 2px solid #f0e6d2;
padding-bottom: 10px;
color: #222;
font-size: 1.5rem;
}
/* FAQ-Eintrag */
.faq-item {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-question {
padding: 15px 20px;
cursor: pointer;
font-weight: bold;
position: relative;
font-size: 1.1rem;
background: #fefcf6;
}
.faq-question::after {
content: '+';
position: absolute;
right: 20px;
font-size: 1.3rem;
color: #ff6f61; /* Schaltflächenfarbe der Homepage vereinheitlichen */
}
.faq-question.active::after {
content: '-';
}
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 20px;
background: #fffef9;
transition: max-height 0.3s ease;
}
.faq-answer p {
padding: 10px 0;
margin: 0;
font-size: 1rem;
color: #444;
}
/* CTA-Button */
.cta {
text-align: center;
margin: 50px 0;
}
.cta button {
background: #ff6f61; /* Haupt-CTA-Farbe der Homepage */
color: #fff;
border: none;
padding: 15px 35px;
font-size: 1rem;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease;
}
.cta button:hover {
background: #e65b50;
}
/* Responsiv */
@media(max-width: 600px){
h1 { font-size: 1.6rem; }
.faq-category h2 { font-size: 1.3rem; }
.faq-question { font-size: 1rem; }
.faq-answer p { font-size: 0.95rem; }
}
</style>
</head>
<body>
<div class="container">
<h1>Häufig gestellte Fragen (FAQ)</h1>
<p class="intro">Haben Sie Fragen? Wir helfen Ihnen gerne weiter. Nachfolgend finden Sie die am häufigsten gestellten Fragen zu unseren Stash Box Produkten.</p>
<!-- Produktinformationen -->
<div class="faq-category">
<h2>Produktinformationen 📦</h2>
<div class="faq-item">
<div class="faq-question">Woraus besteht die Stash Box?</div>
<div class="faq-answer"><p>Unsere Stash Box wird aus hochwertigen, langlebigen Materialien gefertigt, die Ihre Gegenstände sicher und geschützt aufbewahren.</p></div>
</div>
<div class="faq-item">
<div class="faq-question">Welche Größen sind erhältlich?</div>
<div class="faq-answer"><p>Wir bieten kleine, mittlere und große Stash Boxen an, um Ihren Aufbewahrungsbedürfnissen gerecht zu werden.</p></div>
</div>
<div class="faq-item">
<div class="faq-question">Ist sie tragbar?</div>
<div class="faq-answer"><p>Ja, sie ist leicht und kompakt, perfekt für Reisen oder den Heimgebrauch.</p></div>
</div>
</div>
<!-- Versand & Rücksendungen -->
<div class="faq-category">
<h2>Versand & Rücksendungen 🚚</h2>
<div class="faq-item">
<div class="faq-question">Wie lange dauert der Versand?</div>
<div class="faq-answer"><p>Der Standardversand dauert 5-10 Werktage. Beschleunigte Optionen sind an der Kasse verfügbar.</p></div>
</div>
<div class="faq-item">
<div class="faq-question">Kann ich die Stash Box zurückgeben, wenn ich nicht zufrieden bin?</div>
<div class="faq-answer"><p>Ja! Wir bieten eine 30-Tage-Geld-zurück-Garantie auf alle Stash Box Produkte.</p></div>
</div>
</div>
<!-- Verwendung & Pflege -->
<div class="faq-category">
<h2>Verwendung & Pflege 🧼</h2>
<div class="faq-item">
<div class="faq-question">Wie reinige ich meine Stash Box?</div>
<div class="faq-answer"><p>Mit einem feuchten Tuch abwischen. Vermeiden Sie aggressive Chemikalien, um die Oberfläche zu erhalten.</p></div>
</div>
<div class="faq-item">
<div class="faq-question">Kann ich Flüssigkeiten oder verderbliche Artikel darin aufbewahren?</div>
<div class="faq-answer"><p>Wir empfehlen, nur trockene Gegenstände aufzubewahren, um Schäden oder Undichtigkeiten zu vermeiden.</p></div>
</div>
</div>
<!-- Garantie & Sicherheit -->
<div class="faq-category">
<h2>Garantie & Sicherheit 🔒</h2>
<div class="faq-item">
<div class="faq-question">Ist die Stash Box sicher für Kinder?</div>
<div class="faq-answer"><p>Die Stash Box enthält Kleinteile; außerhalb der Reichweite von Kindern aufbewahren.</p></div>
</div>
<div class="faq-item">
<div class="faq-question">Welche Garantie bieten Sie an?</div>
<div class="faq-answer"><p>Alle Stash Box Produkte werden mit einer 1-jährigen eingeschränkten Garantie gegen Herstellungsfehler geliefert.</p></div>
</div>
</div>
<!-- CTA -->
<div class="cta">
<p>Haben Sie Ihre Antwort nicht gefunden? Kontaktieren Sie uns hier.</p>
<button onclick="window.location.href='contact.html'">Kontaktieren Sie uns</button>
</div>
</div>
<script>
// Skript für faltbare FAQs
const questions = document.querySelectorAll('.faq-question');
questions.forEach(q => {
q.addEventListener('click', () => {
q.classList.toggle('active');
const answer = q.nextElementSibling;
if(answer.style.maxHeight){
answer.style.maxHeight = null;
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
}
});
});
</script>
</body>
</html>