Kontakte

<!-- ICON OUTLET BERLIN • Support/Kontakt (mobile-first, light design) -->
<section lang="de" class="lux-support">
<div class="container">
<header class="hero">
<h1>Kundenservice – Icon Outlet Berlin</h1>
<p>Fragen zu Ihrer Bestellung, Rückgabe oder einem Umtausch? Wir helfen Ihnen gern.</p>
<p class="email">📧 <a href="mailto:iconoutlet.europe@gmail.com">iconoutlet.europe@gmail.com</a></p>
</header>
<div class="cards">
<article class="card">
<h2>📦 Bestellstatus</h2>
<p>Nach dem Versand erhalten Sie eine Sendungsnummer per E-Mail. Falls Sie keine erhalten haben, schreiben Sie uns bitte und geben Sie Ihre Bestellnummer an.</p>
</article>
<article class="card">
<h2>🔁 Umtausch &amp; Rückgabe</h2>
<p>Starten Sie den Prozess per E-Mail an <a href="mailto:iconoutlet.europe@gmail.com">iconoutlet.europe@gmail.com</a>. Nach Prüfung senden wir Ihnen die Anweisungen sowie das Formular (ein Formular pro Produkt).</p>
</article>
<article class="card">
<h2>💳 Erstattungen</h2>
<p>Erstattungen erfolgen, nachdem Ihre Rücksendung in unserem Lager eingegangen und geprüft wurde – immer über das ursprünglich verwendete Zahlungsmittel.</p>
</article>
</div>
<section aria-label="Häufige Fragen" class="faq">
<h2>Häufige Fragen (FAQ)</h2>
<details open="">
<summary>Wie lange dauern Versand und Lieferung?</summary>
<p>Bearbeitung in <strong>1–3 Werktagen</strong>, voraussichtliche Lieferung in <strong>7–20 Werktagen</strong>. Abweichungen sind während Feiertagen, Aktionen oder aufgrund lokaler Logistik möglich.</p>
</details>
<details open="">
<summary>Wie starte ich einen Umtausch oder eine Rückgabe?</summary>
<p>Kontaktieren Sie uns unter <a href="mailto:iconoutlet.europe@gmail.com">iconoutlet.europe@gmail.com</a>. Nach Freigabe erhalten Sie die Rücksendeadresse und das Formular.</p>
</details>
<details open="">
<summary>Ist der Versand kostenlos?</summary>
<p>Ja. Wir bieten <strong>kostenlosen Versand</strong> für alle Bestellungen (Deutschland &amp; Österreich). Die Kosten der Rücksendung trägt der Kunde.</p>
</details>
<details>
<summary>Wie erreiche ich den Support?</summary>
<p>Schreiben Sie an <a href="mailto:iconoutlet.europe@gmail.com">iconoutlet.europe@gmail.com</a> und fügen Sie Ihren vollständigen Namen sowie die Bestellnummer hinzu.</p>
</details>
</section>
</div>
</section>
<style>
  /* Mobile-first: optimiert für Smartphones */
  .lux-support {
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #0b0b0d;
    --muted: #4a4a55;
    --border: #e6e6eb;

    background: var(--bg);
    color: var(--text);
    padding: 24px 16px 40px;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.55;
  }

  .container { max-width: 720px; margin: 0 auto; }

  .hero { text-align: left; margin-bottom: 20px; }
  .hero h1 {
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .hero p { color: var(--muted); font-size: 16px; margin: 0 0 10px; }

  .hero .email { margin-top: 6px; font-size: 17px; }
  .hero .email a {
    color: var(--text);
    text-decoration: underline;
    padding: 12px 0; /* >=44px Tap Area */
    display: inline-block;
  }

  .cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0; }
  .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
  }
  .card h2 { margin: 0 0 6px; font-size: 18px; }
  .card p { margin: 0; color: var(--muted); font-size: 15.5px; }

  .faq {
    margin-top: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
  }
  .faq h2 { margin: 0 0 8px; font-size: 18px; }
  .faq details { border-top: 1px solid var(--border); padding: 10px 0; }
  .faq details:first-of-type { border-top: 0; }
  .faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 16px;
    outline: none;
    padding: 8px 0;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq p { color: var(--muted); margin: 6px 0 0; font-size: 15.5px; }

  @media (min-width: 768px) {
    .lux-support { padding: 48px 24px 64px; }
    .hero h1 { font-size: 34px; }
    .hero p { font-size: 17px; }
    .cards { gap: 16px; }
    .card { padding: 16px; }
    .faq { padding: 18px; }
  }
</style>