/*
Theme Name: Estibel
Theme URI: https://estibel.de
Author: Cowork
Description: Massgeschneidertes Premium-Theme fuer ESTIBEL – Kosmetik in Ruhe. Hell/Dunkel, lokale Fonts, WooCommerce.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: estibel
*/

/* ---------- Fonts (lokal, OFL) ---------- */
@font-face{font-family:'Gilda Display';src:url('assets/fonts/gilda-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('assets/fonts/jost-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('assets/fonts/jost-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('assets/fonts/jost-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Farb-Token ---------- */
:root{
 --bg:#FBF8F2;--bg2:#F4EDE1;--card:#FFFDF9;--line:#E7DCC8;--line2:#DCCFB5;--line3:#F0E7D6;
 --ink:#201405;--ink2:#3D3427;--head:#3D2810;--head2:#2C1D0C;--muted:#6F6047;--nav:#4A3F2E;
 --accent:#6B4B22;--accent-h:#3D2810;--accent2:#A6805A;
 --panel:#141311;--panel-line:#2A2621;--on-dark-h:#F3E0BC;--on-dark:#E3D5BC;--on-dark2:#C4AC85;--on-dark-m:#8A7454;
 --drop1:#8B6A3A;--drop2:#6A4A20;--drop3:#4A3015;--drop4:#2A1A0A;--dropink1:#6B4B22;--dropink2:#4A3316;--dropink3:#2C1D0C;
 --show-l:block;--show-d:none;--show-lf:flex;--show-df:none;
 --header-bg:rgba(251,248,242,.92);
}
[data-theme="dark"]{
 --bg:#141311;--bg2:#1A1816;--card:#1F1C19;--line:#2C2823;--line2:#39332B;--line3:#262220;
 --ink:#EADFCA;--ink2:#CBBCA0;--head:#F3E0BC;--head2:#F6E8CB;--muted:#9C8A6C;--nav:#D3C4A7;
 --accent:#D6B684;--accent-h:#F3E0BC;--accent2:#A6805A;
 --panel:#221F1B;--panel-line:#332E28;
 --drop1:#F8E0B8;--drop2:#DDB78A;--drop3:#7A5A3A;--drop4:#2A1F14;--dropink1:#F3E0BC;--dropink2:#D6B684;--dropink3:#A8865B;
 --show-l:none;--show-d:block;--show-lf:none;--show-df:flex;
 --header-bg:rgba(20,19,17,.92);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Jost',ui-sans-serif,system-ui,sans-serif;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s ease}a:hover{color:var(--accent-h)}
h1,h2,h3,h4{font-family:'Gilda Display',Georgia,serif;font-weight:400;color:var(--head2);margin:0}
.est-wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.est-eyebrow{font-family:'Jost';font-weight:500;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent2)}

/* ---------- Buttons ---------- */
.est-btn,.est-btn-ghost{display:inline-flex;align-items:center;gap:9px;font-family:'Jost';font-weight:300;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;padding:14px 26px;border:1px solid var(--accent);cursor:pointer;transition:all .2s ease;line-height:1}
.est-btn{background:var(--accent);color:var(--bg)}
.est-btn:hover{background:var(--accent-h);border-color:var(--accent-h);color:var(--bg)}
.est-btn-ghost{background:transparent;color:var(--accent)}
.est-btn-ghost:hover{background:var(--accent);color:var(--bg)}

/* ---------- Header ---------- */
.est-header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .3s ease,border-color .3s ease}
.est-header-in{max-width:1360px;margin:0 auto;padding:12px clamp(16px,3vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.est-brand{display:flex;align-items:center;gap:12px;flex:none}
.est-brand .est-mark{height:46px;width:auto}
.est-brand .est-l{display:var(--show-l)}.est-brand .est-d{display:var(--show-d)}
.est-brand .wm{font-family:'Gilda Display',serif;font-size:23px;line-height:1;color:var(--head);letter-spacing:.01em}
.est-brand .wm small{display:block;font-family:'Jost';font-weight:400;font-size:8px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.est-nav{display:flex;align-items:center;gap:26px}
.est-nav a{font-family:'Jost';font-weight:300;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--nav)}
.est-nav a:hover{color:var(--accent)}
.est-head-actions{display:flex;align-items:center;gap:14px}
/* Theme toggle – deutlich sichtbar */
.est-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:transparent;color:var(--nav);border-radius:0;padding:7px 10px;cursor:pointer;font-family:'Jost';font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:all .2s ease}
.est-toggle:hover{border-color:var(--accent);color:var(--accent)}
.est-toggle .ic{width:16px;height:16px;display:block}
.est-toggle .ic-sun{display:var(--show-l)}.est-toggle .ic-moon{display:var(--show-d)}
.est-burger{display:none;background:none;border:0;cursor:pointer;color:var(--nav);padding:6px}
.est-burger svg{width:26px;height:26px}
@media(max-width:1120px){
 .est-nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 0;transform:translateY(-140%);transition:transform .3s ease;z-index:39}
 .est-nav.open{transform:translateY(0)}
 .est-nav a{padding:14px clamp(20px,4vw,56px);width:100%;border-top:1px solid var(--line)}
 .est-burger{display:block}
 .est-head-actions .est-btn{display:none}
}

/* ---------- Hero-Animation (Tropfen -> Wellen -> Logo) ---------- */
.est-hero-mark{width:min(150px,42vw);height:auto;margin:0 auto;overflow:visible}
.hm-drop{opacity:0;transform-box:fill-box;transform-origin:center;animation:estDropFall 1.05s cubic-bezier(.55,0,.7,.35) .15s forwards}
.hm-wave{transform-box:fill-box;transform-origin:center;opacity:0}
.hm-wave.w1{animation:estWaveOut .9s cubic-bezier(.2,.7,.3,1) .95s forwards,estWaveLoop 4.5s ease-in-out 2.2s infinite}
.hm-wave.w2{animation:estWaveOut 1s cubic-bezier(.2,.7,.3,1) 1.1s forwards,estWaveLoop 5.2s ease-in-out 2.5s infinite}
.hm-wave.w3{animation:estWaveOut 1.1s cubic-bezier(.2,.7,.3,1) 1.25s forwards,estWaveLoop 6s ease-in-out 2.8s infinite}
.hm-logo{opacity:0;transform-box:fill-box;transform-origin:center bottom;animation:estLogoIn 1.15s cubic-bezier(.4,0,.2,1) 1.75s forwards}
@keyframes estDropFall{0%{transform:translateY(-92px) scale(.45);opacity:0}35%{opacity:1}72%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(6px) scale(.6);opacity:0}}
@keyframes estWaveOut{0%{opacity:0;transform:scaleX(.2)}60%{opacity:1}100%{opacity:1;transform:scaleX(1)}}
@keyframes estWaveLoop{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(calc(1 + var(--wamp,.03))) translateY(var(--wsh,0))}}
@keyframes estLogoIn{from{opacity:0;transform:translateY(12px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.hm-drop,.hm-wave,.hm-logo{animation:none!important;opacity:1!important}}

/* ---------- Sektions-Helfer ---------- */
.est-sec{padding:clamp(64px,8vw,120px) 0}
.est-sec-bg2{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.est-sec-panel{background:var(--panel)}
.est-grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.est-card{background:var(--card);padding:clamp(24px,3vw,38px)}
.est-card h3{color:var(--head);font-size:clamp(21px,2vw,25px);margin:14px 0 10px}
.est-startmark{height:28px;width:auto;align-self:flex-start}
.est-h1{font-family:'Gilda Display',serif;font-weight:400;font-size:clamp(42px,5.4vw,80px);line-height:1.03;letter-spacing:-.015em;color:var(--head2)}
.est-h2{font-size:clamp(30px,3.4vw,48px);line-height:1.15;color:var(--head2)}
.est-lead{font-size:clamp(15.5px,1.4vw,17px);color:var(--ink2);max-width:60ch}
.est-muted{color:var(--muted)}
/* Panel-Text */
.est-sec-panel h2{color:var(--on-dark-h)}
.est-sec-panel p{color:var(--on-dark)}
/* Footer */
.est-footer{background:var(--panel);border-top:1px solid var(--panel-line);color:var(--on-dark);padding:clamp(48px,6vw,80px) 0 28px}
.est-footer a{color:var(--on-dark2)}.est-footer a:hover{color:var(--on-dark-h)}
.est-footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,60px)}
@media(max-width:820px){.est-footer .cols{grid-template-columns:1fr 1fr}}
.est-footer h4{color:var(--on-dark-h);font-size:13px;letter-spacing:.06em;margin-bottom:14px}
.est-footer .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--panel-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--on-dark-m)}
/* WhatsApp Floating */
.est-wa{position:fixed;right:22px;bottom:22px;z-index:50;width:56px;height:56px;display:none;align-items:center;justify-content:center;background:#25D366;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.est-wa svg{width:30px;height:30px;fill:#fff}
@media(min-width:1024px){.est-wa{display:flex}}
/* Platzhalter-Markierung */
.est-ph{outline:1px dashed var(--line2);color:var(--muted);font-size:12px;letter-spacing:.04em;padding:2px 6px;background:color-mix(in srgb,var(--bg2) 70%,transparent)}
.est-imgph{background:var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:20px}

/* globale Logo-Umschaltung */
.est-l{display:var(--show-l)}
.est-d{display:var(--show-d)}