/*
 * Retourenportal Schweiz – Gestaltung nach dem Shop surf4shoes.de.
 *
 * Gestaltungsprinzipien des Shops (abgenommen am 23.09.2026):
 *   Schrift Jost · Flaechen weiss · Schwarz als einzige Akzentfarbe ·
 *   Text warmes Dunkelgrau #423F3F · Buttons eckig, gefuellt schwarz ·
 *   keine Schatten, keine Farbverlaeufe, keine runden Kartenecken ·
 *   Kategorie-Chips als Pille (einzige runde Form) · Sale-Rot #DD6666.
 *
 * Die Schrift wird bewusst LOKAL ausgeliefert (assets/fonts/), nicht ueber
 * Google Fonts - sonst geht die IP jedes Kunden an Google. Siehe LIZENZ.txt.
 */

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;          /* Variable Font */
    font-display: swap;
    src: url("fonts/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/jost-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --text: #423f3f;            /* Fliesstext des Shops */
    --text-stark: #000000;      /* Ueberschriften, Buttons */
    --muted: #767272;
    --line: #dcdcdc;
    --line-zart: #ededed;
    --flaeche: #f7f7f7;         /* Fuellung ruhiger Bloecke */
    --akzent: #000000;
    --danger: #c0392b;
    --danger-flaeche: #fdf4f3;
    --hinweis: #8a6d1f;
    --hinweis-flaeche: #fdfaf0;
    --ok-flaeche: #f4f8f4;
    --ok-linie: #cfdccf;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #ffffff;
    font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.page { padding: 56px 20px 72px; display: flex; justify-content: center; }

.card {
    background: #ffffff;
    padding: 0;
    max-width: 680px;
    width: 100%;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 22px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--line);
}
.logo { width: 165px; height: auto; }

/* Sprachwahl im Stil der Kategorie-Chips des Shops */
.lang-switch { display: flex; gap: 7px; flex-wrap: wrap; }
.lang-switch a {
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 5px 15px;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.lang-switch a:hover { border-color: var(--akzent); color: var(--text-stark); }
.lang-switch a.active {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #ffffff;
}

.headline h1 {
    margin: 0 0 6px;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-stark);
}
.headline .tagline { margin: 0; color: var(--muted); font-size: 0.95rem; }
.intro { margin: 22px 0 6px; }

/* ── Formular ──────────────────────────────────────────────────────────── */

form.retour { margin-top: 28px; }

fieldset {
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 26px 24px 24px;
    margin: 0;
}
legend {
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-stark);
    padding: 0 10px;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 8px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.field .req { color: var(--danger); }

.field input, .field select {
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 0;
    font-size: 0.97rem;
    font-family: inherit;
    color: var(--text);
    background: #ffffff;
    transition: border-color .15s;
}
.field input:hover, .field select:hover { border-color: #b8b8b8; }
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: inset 0 0 0 1px var(--akzent);
}
.field.has-error input {
    border-color: var(--danger);
    background: var(--danger-flaeche);
}

/* ── Schaltflaechen ────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    margin-top: 24px;
    background: var(--akzent);
    color: #ffffff;
    border: 1px solid var(--akzent);
    padding: 13px 30px;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.btn:hover { background: #333333; border-color: #333333; }

.btn.secondary {
    background: #ffffff;
    color: var(--text-stark);
    border-color: var(--akzent);
}
.btn.secondary:hover { background: var(--akzent); color: #ffffff; }

/* ── Meldungen ─────────────────────────────────────────────────────────── */

.alert {
    margin: 22px 0;
    padding: 15px 18px;
    border-radius: 0;
    font-size: 0.93rem;
    border-left: 3px solid;
}
.alert.error {
    background: var(--danger-flaeche);
    border: 1px solid #f0d8d4;
    border-left: 3px solid var(--danger);
    color: var(--danger);
}
.alert.error ul { margin: 8px 0 0; padding-left: 1.1rem; }
.alert.specimen {
    background: var(--hinweis-flaeche);
    border: 1px solid #f0e6c8;
    border-left: 3px solid var(--hinweis);
    color: var(--hinweis);
}

.result-box {
    margin-top: 10px;
    padding: 26px 24px;
    background: var(--ok-flaeche);
    border: 1px solid var(--ok-linie);
    border-radius: 0;
}
.result-box h2 { font-weight: 500; color: var(--text-stark); }

/* ── Weitere Bloecke ───────────────────────────────────────────────────── */

.steps { margin-top: 34px; }
.steps-title {
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-stark);
    margin-bottom: 14px;
}
ol { margin: 0; padding-left: 1.2rem; }
ol li { margin-bottom: 12px; line-height: 1.6; }

.notice {
    margin-top: 30px;
    padding: 18px 20px;
    background: var(--flaeche);
    border: none;
    border-radius: 0;
    font-size: 0.92rem;
}
.notice b {
    display: block;
    margin-bottom: 5px;
    color: var(--text-stark);
    font-weight: 500;
}

.contact {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    font-size: 0.89rem;
    color: var(--muted);
}
.contact h2 {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-stark);
    margin: 0 0 8px;
}
.contact p { margin: 0 0 4px; }
.contact a { color: var(--text-stark); text-decoration: underline; text-underline-offset: 2px; }
.contact a:hover { color: var(--muted); }

@media (max-width: 640px) {
    .page { padding: 32px 16px 48px; }
    .header-top { flex-direction: column; align-items: flex-start; gap: 16px; }
    .grid, .contact { grid-template-columns: 1fr; }
    .logo { width: 145px; }
    .headline h1 { font-size: 1.45rem; }
    fieldset { padding: 22px 18px 20px; }
    .btn { width: 100%; text-align: center; }
}