/* =============================================================
   Studio Kamélie – main.css
   Design-Tokens 1:1 aus dem Wix-Theme extrahiert.
   Layout responsiv umgesetzt (nicht als absolute Offsets).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Montserrat:wght@300;400;500;600&display=swap');

@font-face {
    font-display: swap;
    font-family: 'Agathe Ledden';
    src: url('/assets/fonts/file.woff2') format('woff2'),
         url('/assets/fonts/file.woff') format('woff'),
         url('/assets/fonts/file.ttf') format('truetype');
}

:root {
    /* --- Farben (Wix color_*) ------------------------------- */
    --clr-white:      #ffffff;          /* color_11 / color_36 */
    --clr-lila-lt:    #d8c1dd;          /* color_12 / color_44 */
    --clr-lila:       #620674;          /* color_18 / color_42 */
    --clr-lila-mid:   #b183ba;          /* color_17 / color_43 */
    --clr-accent:     #ceff1c;          /* color_41 / color_47 */
    --clr-text:       #000000;          /* color_15 */
    --clr-text-muted: #404040;          /* color_14 */
    --clr-grey:       #808080;          /* color_13 */
    --clr-border:     #e8dced;
    --clr-form-mute:  #595959;          /* inputSelectionColor / Placeholder */
    --clr-error:      #df3131;          /* Formularfehler */

    /* Header und Menü-Pill tragen dieselbe Deklaration.
       Auf Weiß rendert das #e0cde4, Pill auf Header #dac3df. */
    --clr-veil:       rgba(216, 193, 221, 0.8);

    /* --- Schriften ----------------------------------------- */
    /* Das Wix-Theme deklariert Space Grotesk und Poppins, doch im
       gerenderten Text wird durchgehend Montserrat 400 verwendet
       (inline überschrieben). Deshalb zeigen alle Text-Tokens
       auf Montserrat – Ausnahme: die Hero-Headline. */
    --ff-hero:    'Agathe Ledden', cursive;
    --ff-display: 'Montserrat', sans-serif;
    --ff-body:    'Montserrat', sans-serif;
    --ff-ui:      'Montserrat', sans-serif;
    --ff-nav:     'Cormorant Garamond', serif;   /* Nav-Overlay */

    /* Schriftgrade: fluid, Zielwert = Desktop-Messung */
    --fz-h1:      clamp(2.25rem, 1.0rem + 4.2vw, 4.5rem);  /* → 72px */
    --fz-lead:    clamp(1.0rem, 0.82rem + 0.6vw, 1.375rem); /* → 22px */
    --lh-lead:    1.8;                                      /* → 39,6px */
    --fz-nav:     22px;
    --fz-display-xl: 22px;   /* font_3 */
    --fz-display-l:  21px;   /* font_6 */
    --fz-display-m:  16px;   /* font_4 */
    --fz-body-l:  18px;      /* font_7 */
    --fz-body-m:  15px;      /* font_8 */
    --fz-body-s:  13px;      /* font_9 */
    --fz-body-xs: 12px;      /* font_10 */

    /* --- Abstände ------------------------------------------ */
    --sp-xs:  0.25rem;
    --sp-sm:  0.5rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2.5rem;
    --sp-2xl: 4rem;

    /* --- Layout -------------------------------------------- */
    --content-w:  980px;   /* Wix --site-width */
    --header-h:   103px;   /* Wix --header-height */
    --logo-size:  78px;
    --pill-w:     121px;
    --pill-h:     45px;
    --gutter:     20px;

    --shadow: 0 2px 12px rgba(98, 6, 116, .08);
}

/* Zentrierte Content-Spalte – ein Utility für die ganze Site */
.wrap {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--clr-white);
    color: var(--clr-text);
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-lila); text-decoration: none; }
a:hover { color: var(--clr-lila-mid); text-decoration: underline; }

h1 { font-family: var(--ff-hero);    font-size: var(--fz-h1);         font-weight: 400; line-height: normal; color: var(--clr-lila); }
h2 { font-family: var(--ff-display); font-size: var(--fz-display-xl); font-weight: 400; line-height: normal; color: var(--clr-lila); }
h3 { font-family: var(--ff-display); font-size: var(--fz-display-l);  font-weight: 400; line-height: normal; color: var(--clr-lila); }
ul { list-style: none; }

/* =============================================================
   HEADER
   ============================================================= */
/* Scrollt im Original ganz normal mit – kein sticky/fixed */
.site-header {
    position: relative;
    z-index: 10;
    background: var(--clr-veil);
    height: var(--header-h);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wix-Offsets: Pill +30, Logo -35 innerhalb der 980er-Spalte */
    padding-inline: 30px 35px;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pill-w);
    height: var(--pill-h);
    padding: 0;
    background: var(--clr-veil);
    border: none;
    border-radius: 300px;
    cursor: pointer;
    color: var(--clr-lila);
    font-family: var(--ff-ui);
    font-size: var(--fz-nav);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.nav-toggle:hover { background: var(--clr-lila-mid); color: var(--clr-text); }

.header-right { display: flex; align-items: center; gap: var(--sp-sm); }
.logo { display: block; line-height: 0; }
.logo img { width: var(--logo-size); height: var(--logo-size); object-fit: cover; }

/* --- Nav-Overlay --------------------------------------------
   Panel 980 px breit und zentriert – die Seite bleibt links und
   rechts sichtbar. Items: Cormorant Garamond 600 / 32 px,
   Einzug 54 px, Zeilenabstand 1.4em (= 45 px).
   Aktive Seite schwarz (Wix --txts).                            */
.main-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
}

.main-nav.is-open { display: block; }

.main-nav__panel {
    position: relative;
    width: min(var(--content-w), 100%);
    height: 100%;
    margin-inline: auto;
    background: var(--clr-lila-lt);
    overflow-y: auto;
    padding: 106px 0 var(--sp-2xl);
}

/* Schließen-Button, im Original 36 × 36, mittig bei 50 px */
.nav-close {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 300px;
    background: var(--clr-text);
    color: var(--clr-white);
    cursor: pointer;
    transition: background .2s;
}

.nav-close:hover { background: var(--clr-lila); }
.nav-close svg { width: 18px; height: 18px; display: block; }

.main-nav ul {
    display: flex;
    flex-direction: column;
    padding-left: 54px;
}

.main-nav a {
    display: block;
    padding-inline: 0;              /* Wix --textSpacing: 0 */
    color: var(--clr-lila);
    font-family: var(--ff-nav);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);   /* → 32px */
    font-weight: 600;
    line-height: 1.4;                                  /* → 44,8px */
    transition: color .2s;
}

.main-nav a:hover { color: var(--clr-lila-mid); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--clr-text); }

/* =============================================================
   MAIN / FOOTER
   ============================================================= */
.site-main { flex: 1; }

.site-footer { background: var(--clr-veil); }

/* Links 0…304, Formular 531…979 im 980er-Container.
   Abstände: Links 48/66, Formular 32/31. */
.footer-inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
    padding-block: 32px 31px;
    display: grid;
    grid-template-columns: minmax(0, 304px) minmax(0, 448px);
    justify-content: space-between;
    gap: var(--sp-2xl) var(--sp-xl);
}

.footer-col--links { padding-block: 16px 35px; }

.footer-nav {
    display: flex;
    flex-direction: column;
}

.footer-nav a {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;                 /* → 22,4px */
    color: var(--clr-text);
    text-decoration: underline;
}

.footer-nav a:hover { color: var(--clr-lila); }

.footer-copy {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--clr-text);
}

/* --- Newsletter-Formular ------------------------------------
   448 breit: Input 295 + Gap 12 + Button 140.
   Input 32 px hoch, Button 42 px – oben bündig. */
.newsletter { min-height: 163px; }

.newsletter h2 {
    font-family: var(--ff-ui);
    font-size: 22px;
    font-weight: 400;
    line-height: 27px;
    color: var(--clr-lila);
    margin-bottom: 24px;
}

.newsletter label {
    display: block;
    font-family: var(--ff-ui);
    font-size: 16px;
    line-height: 20px;
    color: var(--clr-text);
    margin-bottom: 8px;
}

.newsletter__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 12px;
}

.newsletter__row input {
    padding: 6px 10px;               /* → 32 px hoch */
    line-height: 20px;
}

.newsletter button {
    padding: 9px 20px;               /* → 42 px hoch */
    font-family: var(--ff-ui);
    font-size: 16px;
    line-height: 20px;
    color: var(--clr-text);
    background: transparent;
    border: 2px solid var(--clr-text);
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}

.newsletter button:hover {
    background: var(--clr-lila-mid);
    border-color: var(--clr-lila-mid);
    color: var(--clr-white);
}

/* Checkbox: weiß, 2 px schwarzer Rahmen, eckig */
.newsletter__check {
    display: flex;
    align-items: center;
    gap: 12px;
}

.newsletter__check input[type="checkbox"] {
    appearance: none;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    background: var(--clr-lila-lt);     /* wie das Eingabefeld */
    border: 2px solid var(--clr-text);
    border-radius: 0;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.newsletter__check input[type="checkbox"]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--clr-form-mute);
    transform: scale(0);
    transition: transform .15s;
}

.newsletter__check input[type="checkbox"]:checked::before { transform: scale(1); }

.newsletter__check label {
    margin: 0;
    font-family: var(--ff-ui);
    font-size: 16px;
    line-height: 20px;
    color: var(--clr-text);
    cursor: pointer;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
    display: inline-block;
    padding: 0.7em 1.6em;
    font-family: var(--ff-ui);
    font-size: var(--fz-display-m);
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
    border: 1px solid var(--clr-lila);
    background: transparent;
    color: var(--clr-lila);
    text-decoration: none;
    border-radius: 0;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--clr-lila); color: var(--clr-white); }
.btn-primary:hover { background: var(--clr-lila-mid); border-color: var(--clr-lila-mid); color: var(--clr-white); text-decoration: none; }
.btn-secondary:hover { background: var(--clr-lila); color: var(--clr-white); text-decoration: none; }
.btn-sm { font-size: var(--fz-body-s); padding: 0.5em 1.1em; }

/* =============================================================
   FORMULARE  (Wix: Border unten 2px, Rest 0, BG lila-hell)
   ============================================================= */
.form-group { margin-bottom: var(--sp-lg); }

label {
    display: block;
    font-family: var(--ff-ui);
    font-size: var(--fz-display-m);
    margin-bottom: var(--sp-xs);
    color: var(--clr-text);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], textarea, select {
    width: 100%;
    padding: 0.5em 0.75em;
    border: 0;
    border-bottom: 2px solid var(--clr-text);
    border-radius: 0;
    background: var(--clr-lila-lt);
    color: var(--clr-text);
    font-family: var(--ff-ui);
    font-size: var(--fz-display-m);
    transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--clr-lila); }
::placeholder { color: var(--clr-form-mute); }
textarea { min-height: 120px; resize: vertical; }

/* Nur fuer Screenreader: aus dem Bild, aber im Zugaenglichkeitsbaum.
   display:none oder visibility:hidden waeren dort ebenfalls weg. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Honeypot des Formular-Systems: muss im Layout unsichtbar sein,
   darf aber nicht display:none haben - manche Bots werten das aus
   und lassen das Feld dann bewusst leer. */
.formular-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-error { color: var(--clr-error); font-size: var(--fz-body-s); margin-top: var(--sp-xs); list-style: disc; padding-left: var(--sp-lg); }
.form-success { background: var(--clr-lila-lt); border: 1px solid var(--clr-lila); padding: var(--sp-md); color: var(--clr-lila); }

/* =============================================================
   SHOP
   ============================================================= */
.produkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-lg); }
.produkt-card { background: var(--clr-white); border: 1px solid var(--clr-border); color: var(--clr-text); display: block; text-decoration: none; }
.produkt-card:hover { box-shadow: var(--shadow); text-decoration: none; }
.produkt-card__img { aspect-ratio: 1; overflow: hidden; background: var(--clr-lila-lt); }
.produkt-card__img img { width: 100%; height: 100%; object-fit: cover; }
.produkt-card__body { padding: var(--sp-sm) var(--sp-md) var(--sp-md); }
.produkt-card__title { font-family: var(--ff-display); font-size: var(--fz-display-m); font-weight: 400; }
.produkt-card__preis { color: var(--clr-lila); font-size: var(--fz-body-m); margin-top: var(--sp-xs); }

.warenkorb-table { width: 100%; border-collapse: collapse; font-size: var(--fz-body-m); }
.warenkorb-table th, .warenkorb-table td { padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--clr-border); text-align: left; }
.warenkorb-table th { color: var(--clr-text-muted); font-weight: 400; font-size: var(--fz-body-xs); text-transform: uppercase; }
.warenkorb-total { text-align: right; font-size: var(--fz-display-m); padding: var(--sp-md) 0; font-family: var(--ff-ui); }

/* =============================================================
   ERROR
   ============================================================= */
.error-page { text-align: center; padding-block: var(--sp-2xl); }
.error-page h1 { margin-bottom: var(--sp-md); }
.error-page p { margin-bottom: var(--sp-lg); color: var(--clr-text-muted); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1019px) {
    .header-inner { padding-inline: var(--gutter); }
}

@media (max-width: 767px) {
    :root { --header-h: 76px; --logo-size: 56px; --pill-w: 100px; --pill-h: 38px; --fz-nav: 18px; }
    .footer-inner { grid-template-columns: 1fr; padding-block: var(--sp-xl); }
    .footer-col--links { padding-block: 0; }
    .newsletter { min-height: 0; }
    .newsletter__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}