/* ═══════════════════════════════════════════════════════════════
   Wittizauber — gemeinsames Design für alle Shop-Seiten
   (index, produkt, anfrage, sonderwunsch, versand, kategorie)
   ═══════════════════════════════════════════════════════════════ */

/* ── Schriften: lokal gehostet (keine Verbindung zu Google), Lizenz SIL OFL 1.1 → fonts/OFL-*.txt ── */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');}

:root{
  --ground:#F7F1E7;      /* Seitenhintergrund (Leinen) */
  --surface:#FFFCF7;     /* Karten, Formulare */
  --sand:#F0E6D6;        /* Flächen, Platzhalter */
  --pale:#D9C3A5;        /* helle Akzente auf dunkel */
  --line:#E6D8C3;        /* Trennlinien */
  --line-strong:#D2BFA3; /* Eingabefelder */
  --ink:#2E2218;         /* Überschriften, dunkle Flächen */
  --text:#4A3A2C;        /* Fließtext */
  --muted:#6E5C4B;       /* Nebentext */
  --brown:#7A5C3A;       /* Marke */
  --accent:#8A4B2E;      /* Sonderwunsch / Badge */
  --ok:#4F6B4A;
  --ok-bg:#EEF1EA;
  --ok-line:#C9D2C2;
  --err:#9B2C1F;
  --err-bg:#FBEDEA;
  --gold:#A06E22;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --radius:16px;
  --shadow:0 12px 32px rgba(46,34,24,.08);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--ink);}
a:hover{color:var(--brown);}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--brown);outline-offset:2px;border-radius:6px;}
[hidden]{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;text-decoration:none;}
.skip-link:focus{top:12px;color:var(--surface);}

.container{max-width:1240px;margin:0 auto;padding:0 32px;}
.container-narrow{max-width:880px;margin:0 auto;padding:0 32px;}

/* ── Typografie ── */
.eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--brown);font-weight:500;}
.h-display{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,72px);line-height:1.03;color:var(--ink);}
.h-display em,.h2 em{font-style:italic;color:var(--brown);}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,48px);line-height:1.08;color:var(--ink);}
.h3{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15;color:var(--ink);}
.lead{margin:0;font-size:18px;line-height:1.7;font-weight:300;}
.muted{color:var(--muted);}
.small{font-size:14px;}
.section{padding:96px 0 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:32px;}
.section-head .stack{display:flex;flex-direction:column;gap:8px;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.4px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink);color:var(--surface);}
.btn-primary:hover{background:#45331f;color:var(--surface);}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--surface);}
.btn-light{background:var(--surface);color:var(--ink);}
.btn-light:hover{background:var(--pale);color:var(--ink);}
.btn-ok{background:var(--ok);border-color:var(--ok);color:var(--surface);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.link-btn{background:none;border:0;padding:0;min-height:36px;color:var(--brown);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:14px;}
.chip{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip[aria-pressed="true"],.chip.active{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.icon-btn{width:44px;height:44px;border:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;border-radius:22px;cursor:pointer;text-decoration:none;}
.icon-btn:hover{background:var(--sand);color:var(--ink);}

/* ── Hinweisleiste oben ── */
.announce{background:var(--ink);color:var(--ground);font-size:14px;min-height:40px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap;text-align:center;}
.announce a{color:var(--surface);font-weight:500;}
.announce a:hover{color:var(--pale);}
.announce .short{display:none;}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid var(--line);}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0;}
.brand-mark{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--sand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark img{width:100%;height:100%;object-fit:cover;}
.brand-mark:empty{display:none;}
.brand-word{font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink);}
.brand-word b{font-weight:600;}
.main-nav{display:flex;align-items:center;gap:28px;font-size:15px;letter-spacing:.3px;}
.main-nav a{text-decoration:none;padding:6px 0;}
.main-nav a[aria-current="page"]{border-bottom:1.5px solid var(--ink);font-weight:500;}
.nav-dd-wrap{position:relative;}
.nav-dd{position:absolute;top:100%;left:-16px;min-width:220px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:none;flex-direction:column;z-index:60;}
.nav-dd a{padding:10px 12px;border-radius:8px;}
.nav-dd a:hover{background:var(--sand);}
.nav-dd-wrap:hover .nav-dd,.nav-dd-wrap:focus-within .nav-dd{display:flex;}
.header-actions{display:flex;align-items:center;gap:6px;}
.wl-pill{height:44px;padding:0 16px;border-radius:22px;background:var(--ink);color:var(--surface);text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;}
.wl-pill:hover{background:#45331f;color:var(--surface);}
.wl-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.burger{display:none;}
.mobile-menu{border-top:1px solid var(--line);background:var(--ground);padding:8px 20px 20px;display:flex;flex-direction:column;}
.mobile-menu a{padding:12px 4px;text-decoration:none;font-size:17px;border-bottom:1px solid var(--line);}
#mobile-cat-links{display:contents;}
.mobile-menu a.sub{padding-left:20px;font-size:15px;color:var(--muted);}

/* ── Breadcrumb ── */
.breadcrumb{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding:24px 0;}
.breadcrumb a{color:var(--muted);}
.breadcrumb [aria-current]{color:var(--ink);}

/* ── Formulare ── */
.field{display:flex;flex-direction:column;gap:8px;}
.field label,.field .label{font-size:14px;font-weight:500;color:var(--ink);}
.field .opt{font-weight:400;color:var(--muted);}
.input,.select,.textarea{width:100%;min-height:50px;border:1px solid var(--line-strong);border-radius:12px;padding:0 14px;background:var(--surface);font-size:15px;color:var(--ink);}
.textarea{padding:12px 14px;min-height:110px;resize:vertical;line-height:1.5;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(46,34,24,.12);}
.check{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink);cursor:pointer;min-height:32px;}
.check input{width:20px;height:20px;accent-color:var(--ink);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.form-note{font-size:13px;color:var(--muted);text-align:center;}
.notice{border-radius:14px;padding:14px 18px;font-size:15px;line-height:1.5;}
.notice-ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ink);}
.notice-err{background:var(--err-bg);border:1px solid #E7B9B1;color:var(--err);}
.notice-info{background:var(--surface);border:1px dashed var(--line-strong);}

/* ── Mengenwähler ── */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);height:52px;}
.stepper button{width:46px;height:50px;border:0;background:transparent;font-size:20px;color:var(--ink);cursor:pointer;border-radius:999px;}
.stepper output,.stepper span{min-width:26px;text-align:center;font-size:16px;color:var(--ink);}
.stepper.sm{height:44px;}
.stepper.sm button{width:40px;height:42px;font-size:18px;}

/* ── Produktkarte ── */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px 20px;}
.p-card{position:relative;display:flex;flex-direction:column;gap:12px;}
.p-card-link{text-decoration:none;display:flex;flex-direction:column;gap:12px;color:var(--ink);}
.p-card-img{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--sand);}
.p-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.p-card-link:hover .p-card-img img{transform:scale(1.04);}
.img-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;letter-spacing:1px;text-transform:uppercase;background:repeating-linear-gradient(135deg,var(--sand) 0 10px,#EADFCB 10px 20px);}
.p-badges{position:absolute;bottom:12px;left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.badge{font-size:12px;font-weight:500;letter-spacing:.3px;padding:5px 11px;border-radius:12px;background:var(--surface);color:var(--ink);}
.badge-accent{background:var(--accent);color:var(--surface);}
.badge-new{background:var(--ink);color:var(--surface);}
.p-unavailable{position:absolute;inset:0 0 auto 0;background:rgba(46,34,24,.78);color:var(--surface);font-size:13px;text-align:center;padding:8px;}
.p-card-body{display:flex;flex-direction:column;gap:6px;}
.p-card-cat{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brown);}
.p-card-name{font-family:var(--serif);font-size:24px;line-height:1.15;color:var(--ink);}
.p-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.p-card-price{font-size:15px;font-weight:500;color:var(--ink);}
.dots{display:flex;gap:5px;flex-wrap:wrap;}
.dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(46,34,24,.18);display:inline-block;}
.dot.off{opacity:.35;filter:grayscale(.6);}
.dot.hi{outline:2px solid var(--ink);outline-offset:1px;}
.p-card-sub{font-size:13px;color:var(--muted);}
.p-card-save{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:22px;border:0;background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(46,34,24,.12);}
.p-card-save:hover{background:var(--ink);color:var(--surface);}
.p-card-save.saved{background:var(--ok);color:var(--surface);}

/* ── Tooltip / Hilfe ── */
.help{position:relative;display:inline-flex;}
.help-btn{min-height:44px;padding:0 4px;border:0;background:transparent;display:inline-flex;align-items:center;gap:10px;cursor:help;font-size:14px;color:var(--muted);}
.help-btn .q{width:24px;height:24px;border-radius:12px;border:1.5px solid var(--brown);color:var(--brown);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.help-btn .t{text-decoration:underline dotted;text-underline-offset:4px;}
.help-pop{position:absolute;left:0;bottom:calc(100% + 10px);z-index:40;width:380px;max-width:calc(100vw - 40px);background:var(--ink);color:var(--ground);border-radius:16px;padding:22px;display:none;flex-direction:column;gap:14px;box-shadow:0 18px 40px rgba(46,34,24,.28);}
.help-pop::after{content:'';position:absolute;left:14px;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg);}
.help.open .help-pop{display:flex;}
@media (hover:hover){.help:hover .help-pop,.help:focus-within .help-pop{display:flex;}}
.help-pop .h{font-family:var(--serif);font-size:24px;color:var(--surface);line-height:1.2;}
.help-pop ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5;}
.help-pop li{display:flex;gap:12px;}
.help-pop li b{color:var(--pale);}
.help-pop strong{color:var(--surface);font-weight:500;}
.help-pop .foot{font-size:13px;color:var(--line-strong);border-top:1px solid var(--text);padding-top:12px;}

/* ── Sonderwunsch-Band ── */
.band-dark{background:var(--ink);color:var(--ground);}
.band-dark .eyebrow{color:var(--pale);}
.band-dark .h2,.band-dark .h-display{color:var(--surface);}
.band-dark .h2 em{color:var(--pale);}
.yarn-cluster{position:relative;width:420px;height:420px;max-width:100%;}
.yarn-cluster span{position:absolute;border-radius:50%;}
.steps-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;}
.step{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--muted);padding-top:14px;}
.step .n{font-family:var(--serif);font-size:34px;color:var(--pale);line-height:1;}
.step .t{font-weight:500;color:var(--surface);}
.step .d{font-size:14px;color:var(--line-strong);line-height:1.5;}

/* ── Werk-Collage / Wollknäuel-Grafik (statt Porträt) ── */
.collage{display:grid;gap:10px;width:100%;height:100%;}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:12px;min-height:0;}
.collage.c2{grid-template-columns:1fr 1fr;}
.collage.c3{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;}
.collage.c3 .ci0{grid-row:1 / span 2;}
.yarn-art{position:relative;width:min(80%,360px);aspect-ratio:1/1;}
.yarn-art span{position:absolute;border-radius:50%;}

/* ── Karten ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;}
.accent-box{border:1.5px solid var(--accent);border-radius:16px;padding:20px 22px;background:var(--surface);display:flex;gap:16px;align-items:flex-start;}
.accent-box .mini-dots{display:flex;gap:4px;padding-top:6px;flex-shrink:0;}
.accent-box .mini-dots span{width:14px;height:14px;border-radius:7px;}

/* ── Tabelle (Versand) ── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
.ship-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;}
.ship-table th,.ship-table td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--sand);}
.ship-table thead th{font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);}
.ship-table tbody th{font-weight:400;color:var(--ink);}
.ship-table tr:last-child th,.ship-table tr:last-child td{border-bottom:0;}
.ship-table .hl{background:var(--ok-bg);}
.ship-table tr.sel th{font-weight:600;}
.ship-table tr.sel{background:var(--ground);}
.ship-table .sub{color:var(--muted);font-size:12px;}

/* ── Footer ── */
.site-footer{background:var(--ink);color:var(--line-strong);margin-top:96px;}
.footer-grid{padding:64px 32px 40px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.footer-col .h{color:var(--surface);font-weight:500;}
.footer-col a,.footer-col .footer-btn{color:var(--line-strong);text-decoration:none;}
.footer-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;text-align:left;cursor:pointer;}
.footer-btn:hover{color:var(--surface);}
.footer-col a:hover{color:var(--surface);}
.footer-brand{font-family:var(--serif);font-size:30px;color:var(--surface);}
.footer-brand b{font-weight:600;}
.footer-bottom{padding:20px 32px 32px;border-top:1px solid var(--text);font-size:13px;}

/* ── Merkliste-Leiste (Handy) ── */
.wl-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:45;height:56px;border-radius:28px;background:var(--ink);color:var(--surface);text-decoration:none;display:none;align-items:center;justify-content:space-between;padding:0 22px;font-size:15px;box-shadow:0 10px 28px rgba(46,34,24,.28);}
.wl-bar:hover{color:var(--surface);}
.wl-bar span{display:flex;align-items:center;gap:10px;}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:70;background:var(--ink);color:var(--ground);border-radius:16px;padding:14px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 14px 34px rgba(46,34,24,.3);transition:transform .3s ease;max-width:calc(100vw - 32px);font-size:15px;}
.toast.show{transform:translate(-50%,0);}
.toast a{color:var(--surface);font-weight:500;white-space:nowrap;}

/* ── Cookie-Banner ── */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 22px;display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap;box-shadow:0 18px 40px rgba(46,34,24,.18);transform:translateY(160%);transition:transform .35s ease;font-size:14px;}
.cookie-banner.visible{transform:translateY(0);}
.cookie-banner p{margin:0;flex:1 1 320px;line-height:1.55;}
.cookie-banner p strong{display:block;font-weight:500;color:var(--ink);margin-bottom:2px;}
.cookie-banner .btns{display:flex;gap:10px;}
.cookie-banner .btn{min-height:44px;padding:0 20px;font-size:14px;}

/* ── Fortschritt (Merkliste) ── */
.progress{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;}
.progress li{display:flex;align-items:center;gap:10px;color:var(--muted);}
.progress .m{width:30px;height:30px;border-radius:15px;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
.progress li.done .m{background:var(--ok);border-color:var(--ok);color:var(--surface);}
.progress li.cur{color:var(--ink);font-weight:500;}
.progress li.cur .m{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.progress .line{width:48px;height:1px;background:var(--line-strong);}

/* ── Responsive ── */
@media (max-width:1060px){
  .main-nav{gap:20px;font-size:14px;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .main-nav{display:none;}
  .burger{display:inline-flex;}
  .wl-pill-label{display:none;}
  .wl-bar.has-items{display:flex;}
  body.has-wl-bar{padding-bottom:88px;}
  .cookie-banner{bottom:88px;}
}
@media (max-width:600px){
  .container,.container-narrow{padding:0 20px;}
  .announce .long{display:none;}
  .announce .short{display:inline;}
  .announce{font-size:13px;min-height:36px;}
  .header-inner{height:64px;}
  .brand-word{font-size:26px;}
  .brand-mark{width:34px;height:34px;}
  .section{padding-top:64px;}
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;}
  .p-card-name{font-size:19px;}
  .p-card-price{font-size:14px;}
  .p-badges{bottom:8px;left:8px;}
  .badge{font-size:10.5px;padding:4px 8px;}
  .p-card-save{width:40px;height:40px;top:6px;right:6px;}
  .footer-grid{grid-template-columns:1fr 1fr;padding:48px 20px 32px;gap:28px;}
  .footer-grid .footer-col:first-child{grid-column:1/-1;}
  .footer-bottom{padding:20px;}
  .card{padding:22px;}
  .lead{font-size:16px;}
  .progress .line{width:20px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}