/* ==========================================================================
   JALES Manufaktur-Sektion — Gemeinsame Basis-Stile
   Wird von manufaktur.html, wandbilder.html, akustikbilder.html,
   leuchtbilder.html und fotodruck.html eingebunden.
   ========================================================================== */

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--jales-ivory);color:var(--jales-charcoal);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Container */
.container{max-width:var(--maxw-content);margin:0 auto;padding:0 var(--container-pad)}

/* Eyebrow */
.eyebrow{font:600 11px/1.4 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--jales-amber-text);margin-bottom:var(--space-3)}
.eyebrow-light{color:var(--jales-amber-soft)}

/* Amber rule */
.rule-amber{height:1px;background:var(--jales-amber);border:0;width:64px;margin:var(--space-4) 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:var(--r-pill);font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform 80ms;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--jales-forest);color:var(--jales-ivory)}
.btn-primary:hover{background:var(--jales-forest-deep)}
.btn-ghost{background:transparent;color:var(--jales-charcoal);border-color:var(--jales-charcoal)}
.btn-ghost:hover{background:var(--jales-charcoal);color:var(--jales-ivory)}
.btn-ghost-light{background:transparent;color:var(--jales-ivory);border-color:rgba(248,244,236,.45)}
.btn-ghost-light:hover{background:rgba(248,244,236,.12)}
.btn-sm{padding:10px 18px;font-size:10px}

/* Link CTA */
.link-cta{font:600 11px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--jales-forest);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(42,63,51,.28)}
.link-cta:hover{text-decoration-color:var(--jales-forest)}

/* Site header */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(248,244,236,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--jales-linen)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.nav-links{display:flex;align-items:center;gap:var(--space-5);list-style:none}
.nav-links a{font:500 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--jales-charcoal);white-space:nowrap;transition:color var(--dur-base) var(--ease)}
.nav-links a:hover{color:var(--jales-forest)}
.nav-links a[aria-current="page"]{color:var(--jales-forest);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.nav-cta{margin-left:var(--space-4)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;min-width:44px;min-height:44px;color:var(--jales-charcoal)}
.mobile-nav{display:none;flex-direction:column;background:var(--jales-ivory);border-top:1px solid var(--jales-linen);padding:var(--space-4) var(--container-pad) var(--space-5)}
.mobile-nav a{display:block;padding:var(--space-4) 0;font:500 14px/1.4 var(--font-sans);color:var(--jales-charcoal);border-bottom:1px solid var(--jales-linen)}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav.open{display:flex}
.mobile-nav a[aria-current="page"]{color:var(--jales-forest)}

/* Manufaktur sub-nav */
.mfk-subnav{background:var(--jales-linen-2);border-bottom:1px solid var(--jales-linen);position:sticky;top:var(--header-h);z-index:90}
.mfk-subnav-inner{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 var(--container-pad);height:42px;max-width:var(--maxw-content);margin:0 auto}
.mfk-subnav-inner::-webkit-scrollbar{display:none}
.mfk-subnav-label{font:600 10px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--jales-amber-text);padding:0 14px 0 2px;flex-shrink:0;white-space:nowrap}
.mfk-subnav a{font:500 12px/1 var(--font-sans);color:var(--jales-ink-2);padding:8px 12px;border-radius:var(--r-sm);white-space:nowrap;transition:color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);flex-shrink:0}
.mfk-subnav a:hover,.mfk-subnav a.active{color:var(--jales-forest);background:rgba(42,63,51,.07)}

/* Sections */
.section{padding:var(--section-pad-md) 0}
.section-alt{background:var(--jales-linen-2)}
.section-dark{background:var(--jales-forest);color:var(--jales-ivory)}
.section h2{font:500 clamp(26px,3.5vw,40px)/1.1 var(--font-serif);letter-spacing:-.01em;margin:0 0 var(--space-5)}
.section-dark h2{color:var(--jales-ivory)}
.lead-text{font:400 17px/1.7 var(--font-sans);color:var(--jales-ink-2);max-width:56ch;margin:0 0 var(--space-6)}

/* Hero (ivory — sub-pages) */
.hero-ivory{padding:var(--section-pad-lg) 0;border-bottom:1px solid var(--jales-linen)}
.hero-ivory .eyebrow{margin-bottom:var(--space-3)}
.hero-ivory h1{font:500 clamp(32px,4.5vw,54px)/1.06 var(--font-serif);letter-spacing:-.01em;color:var(--jales-charcoal);margin:0 0 18px}
.hero-ivory .hero-sub{font:400 17px/1.65 var(--font-sans);color:var(--jales-ink-2);max-width:54ch;margin:0 0 var(--space-6)}
.hero-ivory .hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* FAQ */
.faq-list{margin-top:var(--space-7);max-width:740px}
.faq-item{border-top:1px solid var(--jales-linen)}
.faq-item:last-child{border-bottom:1px solid var(--jales-linen)}
.faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;background:none;border:none;cursor:pointer;font:500 15px/1.4 var(--font-sans);color:var(--jales-charcoal);text-align:left}
.section-alt .faq-trigger{color:var(--jales-charcoal)}
.faq-trigger:hover{color:var(--jales-forest)}
.faq-chevron{flex-shrink:0;transition:transform var(--dur-base) var(--ease)}
.faq-item.is-open .faq-chevron{transform:rotate(180deg)}
.faq-aw{padding:0 0 var(--space-5)}
.faq-aw p{font:400 14.5px/1.75 var(--font-sans);color:var(--jales-ink-2)}

/* Closing CTA */
.closing-inner{text-align:center;max-width:520px;margin:0 auto}
.closing-inner h2{font:500 clamp(26px,3.5vw,40px)/1.1 var(--font-serif);color:var(--jales-charcoal);margin:0 0 var(--space-6)}
.closing-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}

/* CTA band (dark) */
.cta-dark{background:var(--jales-forest);color:var(--jales-ivory);padding:var(--section-pad-md) 0}
.cta-dark-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.cta-dark-body p{font:400 15px/1.6 var(--font-sans);color:rgba(248,244,236,.75);max-width:46ch;margin:var(--space-3) 0 0}
.cta-dark-body h2{font:500 clamp(22px,3vw,34px)/1.1 var(--font-serif);color:var(--jales-ivory)}
.cta-dark-btns{display:flex;flex-wrap:wrap;gap:var(--space-3);flex-shrink:0}

/* Hint note */
.hint-note{background:rgba(42,63,51,.08);border-left:2px solid var(--jales-amber);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--space-4) var(--space-5);font:400 13px/1.65 var(--font-sans);color:var(--jales-ink-2);margin:var(--space-5) 0}

/* Footer */
.site-footer{background:var(--jales-charcoal);color:var(--jales-ivory)}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--gap-section);padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px)}
.footer-brand-tagline{font:600 15px/1.5 var(--font-sans);color:#F8F4EC;margin:var(--space-5) 0 var(--space-4);max-width:28ch}
.footer-social-label{font:600 10px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(248,244,236,.45);margin-bottom:var(--space-3)}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(248,244,236,.18);border-radius:var(--r-pill);color:rgba(248,244,236,.7);transition:color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease)}
.footer-social a:hover{color:var(--jales-charcoal);background:var(--jales-ivory);border-color:var(--jales-ivory)}
.footer-social svg{width:21px;height:21px;display:block}
.footer-col-title{font:500 11px/1.4 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(248,244,236,.5);margin-bottom:var(--space-4)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links a{font:500 11px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(248,244,236,.65);transition:color var(--dur-base) var(--ease)}
.footer-links a:hover{color:var(--jales-ivory)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);border-top:1px solid rgba(248,244,236,.13);padding:var(--space-5) 0}
.footer-copy{font:400 12px/1.5 var(--font-sans);color:rgba(248,244,236,.42)}
.footer-legal{display:flex;gap:var(--space-5);list-style:none}
.footer-legal a{font:400 12px/1 var(--font-sans);color:rgba(248,244,236,.42);transition:color var(--dur-base) var(--ease)}
.footer-legal a:hover{color:rgba(248,244,236,.72)}

/* Skip link */
.skip-link{position:absolute;left:8px;top:-60px;z-index:2000;background:#2A3F33;color:#F8F4EC;padding:12px 20px;border-radius:0 0 10px 10px;text-decoration:none;font:700 14px/1 system-ui,sans-serif;transition:top .18s ease}
.skip-link:focus{top:0}

/* Responsive */
@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .menu-toggle{display:flex;align-items:center;justify-content:center}
}
@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr;gap:var(--space-7)}
  .cta-dark-inner{flex-direction:column;align-items:flex-start}
}


/* == Anfrage-Modal ========================================= */
    .anfrage-modal { position:fixed; inset:0; z-index:500; background:rgba(31,26,20,.52); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:var(--container-pad); opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease); }
    .anfrage-modal.is-open { opacity:1; pointer-events:auto; }
    .modal-panel { background:var(--jales-ivory); border-radius:var(--r-xl); box-shadow:var(--shadow-3); width:100%; max-width:580px; max-height:90vh; overflow-y:auto; padding:clamp(28px,4vw,48px); position:relative; }
    .modal-close-btn { position:sticky; float:right; top:0; margin:-8px -8px 0 var(--space-3); width:36px; height:36px; border:none; background:var(--jales-ivory); cursor:pointer; color:var(--jales-ink-2); display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:background var(--dur-base) var(--ease); z-index:5; }
    .modal-close-btn:hover { background:var(--jales-linen); }
    .modal-title { font:500 clamp(22px,3vw,30px)/1.1 var(--font-serif); color:var(--jales-charcoal); margin:0 0 var(--space-2); }
    .modal-sub { font:400 14px/1.65 var(--font-sans); color:var(--jales-ink-2); margin:0 0 var(--space-6); }
    .form-row { margin-bottom:var(--space-5); }
    .form-row label { display:block; font:600 10.5px/1.4 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--jales-charcoal); margin-bottom:var(--space-2); }
    .form-row label .req { color:var(--jales-amber-text); }
    .form-input,.form-textarea { width:100%; padding:11px 14px; border:1px solid var(--jales-linen); border-radius:var(--r-md); background:var(--jales-paper); font:400 14px/1.5 var(--font-sans); color:var(--jales-charcoal); -webkit-appearance:none; transition:border-color var(--dur-base) var(--ease); }
    .form-input:focus,.form-textarea:focus { outline:none; border-color:var(--jales-forest); }
    .form-textarea { resize:vertical; min-height:80px; }
    .form-two { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
    .form-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
    .form-chip { display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--jales-linen); border-radius:var(--r-pill); cursor:pointer; font:400 13px/1 var(--font-sans); color:var(--jales-ink-2); transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease),color var(--dur-base) var(--ease); user-select:none; }
    .form-chip input { position:absolute; opacity:0; width:0; height:0; }
    .form-chip:hover { border-color:var(--jales-forest); color:var(--jales-forest); }
    .form-chip.is-sel { background:var(--jales-forest); color:var(--jales-ivory); border-color:var(--jales-forest); }
    .form-chip.is-sel:hover { color:var(--jales-ivory); }
    .form-submit { width:100%; padding:14px; background:var(--jales-forest); color:var(--jales-ivory); border:none; border-radius:var(--r-pill); font:600 11px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; margin-top:var(--space-3); transition:background var(--dur-base) var(--ease); }
    .form-submit:hover { background:var(--jales-forest-deep); }
    .form-note { font:400 12px/1.55 var(--font-sans); color:var(--jales-warm-grey); margin-top:var(--space-3); }
    .form-confirm { text-align:center; padding:var(--space-9) 0; }
    .form-confirm-icon { width:52px; height:52px; border-radius:50%; background:var(--jales-forest-tint); color:var(--jales-forest); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-5); }
    .form-confirm h3 { font:500 clamp(20px,2.5vw,26px)/1.2 var(--font-serif); color:var(--jales-charcoal); margin:0 0 var(--space-3); }
    .form-confirm p { font:400 14.5px/1.7 var(--font-sans); color:var(--jales-ink-2); max-width:34ch; margin:0 auto; }
    button.link-cta { background:none; border:none; cursor:pointer; padding:0; font-family:inherit; }
    .form-field-hint { font:400 12px/1.5 var(--font-sans); color:var(--jales-warm-grey); margin-top:var(--space-1); }
    .form-field-hint--accent { color:var(--jales-amber-text); }
    @media(max-width:480px){ .form-two{grid-template-columns:1fr;} }
.form-field-hint{font:400 12px/1.5 var(--font-sans);color:var(--jales-warm-grey);margin-top:var(--space-1)}
.form-field-hint--accent{color:var(--jales-amber-text)}
@media(max-width:480px){.form-two{grid-template-columns:1fr}}