/* =================================================================
   Jäger-Show — components.css
   Buttons, Cards, Formulare, Galerie, Lightbox, Stats, CTA
   ================================================================= */

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    font-family:var(--font-head);font-weight:600;font-size:1rem;line-height:1;
    padding:.95rem 1.7rem;border-radius:var(--r-full);
    cursor:pointer;white-space:nowrap;
    transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
    will-change:transform;
}
.btn .icon{width:19px;height:19px;transition:transform var(--t)}
.btn--primary{background:var(--grad-accent);color:#fff;box-shadow:var(--shadow-glow)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 46px -10px var(--violet-glow)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border-strong)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--violet-400);transform:translateY(-2px)}
.btn--cream{background:var(--cream);color:#2a1a0a}
.btn--cream:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(245,234,193,.4)}
.btn--sm{padding:.6rem 1.15rem;font-size:.9rem}
.btn--lg{padding:1.1rem 2.1rem;font-size:1.075rem}
.btn:hover .icon{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem}

/* Text-Link mit Pfeil */
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;color:var(--violet-300)}
.link-arrow .icon{width:18px;height:18px;transition:transform var(--t)}
.link-arrow:hover{color:var(--violet-400)}
.link-arrow:hover .icon{transform:translateX(4px)}

/* ---------- Karte (Basis) ---------- */
.card{
    position:relative;
    background:linear-gradient(160deg,var(--surface-2),var(--surface) 70%);
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:clamp(1.5rem,3vw,2.1rem);
    transition:transform var(--t),border-color var(--t),box-shadow var(--t),background var(--t);
    overflow:hidden;height:100%;
}
.card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(400px 200px at 50% -20%,rgba(124,58,237,.16),transparent 70%);
    opacity:0;transition:opacity var(--t);
}
.card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.card:hover::after{opacity:1}

/* Leistungs-Karte */
.svc-card .svc-card__icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:var(--r-md);margin-bottom:1.25rem;
    background:var(--grad-violet);border:1px solid var(--border-strong);color:var(--violet-300);
    transition:transform var(--t),color var(--t);
}
.svc-card .svc-card__icon .icon{width:28px;height:28px}
.svc-card:hover .svc-card__icon{transform:scale(1.06) rotate(-3deg);color:var(--violet-400)}
.svc-card h3{font-size:1.2rem;margin-bottom:.6rem}
.svc-card p{color:var(--text-muted);font-size:.97rem}

/* Grid-Helfer */
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}}

/* ---------- USP-Karte ---------- */
.usp{background:linear-gradient(160deg,var(--surface-2),var(--surface) 72%);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.2rem);height:100%;transition:transform var(--t),border-color var(--t)}
.usp:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.usp__icon{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:var(--r-full);background:var(--grad-violet);color:var(--violet-300);margin-bottom:1.2rem}
.usp__icon .icon{width:26px;height:26px}
.usp h3{font-size:1.15rem;margin-bottom:.7rem;color:var(--cream)}
.usp p{color:var(--text-muted);font-size:.96rem}

/* ---------- Feature-Liste (Häkchen) ---------- */
.feature-list{display:flex;flex-direction:column;gap:.85rem}
.feature-list li{display:flex;gap:.8rem;align-items:flex-start;color:var(--text-soft)}
.feature-list .icon{width:22px;height:22px;flex:0 0 auto;margin-top:.15rem;color:var(--violet-400);
    background:var(--grad-violet);border-radius:var(--r-full);padding:3px}

/* ---------- Split (Text + Bild) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s var(--ease-out)}
.split__media:hover img{transform:scale(1.05)}
.split__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,transparent 55%,rgba(70,14,105,.35))}
@media (max-width:820px){
    .split{grid-template-columns:1fr;gap:1.75rem}
    .split--reverse .split__media{order:0}
}

/* ---------- Stats / Counter ---------- */
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem)}
.stat__num{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,1.5rem + 2.5vw,3.4rem);
    background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat__label{color:var(--text-muted);font-size:.95rem;margin-top:.35rem}

/* ---------- CTA-Band ---------- */
.cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
    padding:clamp(2.5rem,6vw,4.5rem);text-align:center;
    border:1px solid var(--border-strong)}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(120deg,rgba(70,14,105,.9),rgba(10,10,11,.82))}
.cta-band h2{margin-bottom:1rem}
.cta-band p{max-width:56ch;margin:0 auto 2rem;color:var(--text-soft)}
.cta-band .btn-row{justify-content:center}

/* ---------- Galerie ---------- */
.gallery{display:grid;gap:.9rem;grid-template-columns:repeat(4,1fr)}
.gallery__item{position:relative;border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:var(--surface-2);aspect-ratio:4/3}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),filter var(--t)}
.gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(70,14,105,.5));opacity:0;transition:opacity var(--t)}
.gallery__item:hover img{transform:scale(1.08)}
.gallery__item:hover::after{opacity:1}
.gallery__item:focus-visible{outline-offset:-2px}
.gallery--home{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.gallery,.gallery--home{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.gallery,.gallery--home{grid-template-columns:repeat(2,1fr);gap:.6rem}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
    background:rgba(6,5,9,.94);backdrop-filter:blur(6px);padding:clamp(1rem,4vw,3rem)}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:min(1100px,92vw);max-height:86vh;width:auto;height:auto;border-radius:var(--r-md);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:lb-in .35s var(--ease-out)}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lightbox__btn{position:absolute;top:1.2rem;right:1.2rem;width:48px;height:48px;border-radius:var(--r-full);
    background:rgba(255,255,255,.08);border:1px solid var(--border-strong);color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--t)}
.lightbox__btn:hover{background:rgba(255,255,255,.18)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:var(--r-full);
    background:rgba(255,255,255,.08);border:1px solid var(--border-strong);color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--t)}
.lightbox__nav:hover{background:rgba(255,255,255,.18)}
.lightbox__nav .icon{width:26px;height:26px}
.lightbox__prev{left:1.2rem}
.lightbox__prev .icon{transform:rotate(180deg)}
.lightbox__next{right:1.2rem}
@media (max-width:600px){.lightbox__nav{width:44px;height:44px}}

/* ---------- Formular ---------- */
.form{display:grid;gap:1.5rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}
.field{position:relative;display:flex;flex-direction:column}
.field label{font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--text-soft);margin-bottom:.5rem}
.field .req{color:var(--violet-300)}
.field input,.field textarea{
    width:100%;padding:.9rem 1rem;background:var(--surface);color:var(--text);
    border:1px solid var(--border-strong);border-radius:var(--r-md);
    transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.field textarea{resize:vertical;min-height:150px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violet-400);box-shadow:0 0 0 3px rgba(124,58,237,.22);background:var(--surface-2)}
.field--invalid input,.field--invalid textarea{border-color:#e0576b;box-shadow:0 0 0 3px rgba(224,87,107,.18)}
.field__error{color:#f2919e;font-size:.83rem;margin-top:.4rem;min-height:1em}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.checkbox{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;color:var(--text-soft)}
.checkbox input{width:20px;height:20px;flex:0 0 auto;margin-top:.15rem;accent-color:var(--violet)}
.checkbox a{color:var(--violet-300);text-decoration:underline}
.form__note{font-size:.85rem;color:var(--text-dim)}
.form__status{padding:1rem 1.2rem;border-radius:var(--r-md);font-size:.95rem;display:none}
.form__status.is-visible{display:block;animation:lb-in .3s var(--ease-out)}
.form__status--ok{background:rgba(76,175,120,.14);border:1px solid rgba(76,175,120,.4);color:#a7e8c4}
.form__status--err{background:rgba(224,87,107,.12);border:1px solid rgba(224,87,107,.4);color:#f2919e}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* ---------- Kontakt-Kacheln ---------- */
.contact-tiles{display:grid;gap:1rem}
.contact-tile{display:flex;gap:1rem;align-items:center;padding:1.2rem 1.35rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);transition:transform var(--t),border-color var(--t)}
.contact-tile:hover{transform:translateY(-3px);border-color:var(--violet-400)}
.contact-tile__icon{display:inline-flex;width:48px;height:48px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:var(--r-md);background:var(--grad-violet);color:var(--violet-300)}
.contact-tile__icon .icon{width:24px;height:24px}
.contact-tile__label{font-size:.82rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.contact-tile__value{font-family:var(--font-head);font-weight:600;color:var(--text)}
.contact-tile a.contact-tile__value:hover{color:var(--violet-300)}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:var(--r-full);
    background:var(--grad-violet);border:1px solid var(--border-strong);
    font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--violet-300)}
.badge .icon{width:16px;height:16px}