/* ==========================================================
   jhsaar.de - STARTSEITE
========================================================== */
.hero{position:relative;overflow:hidden;padding:clamp(50px,7vw,90px) 22px clamp(70px,9vw,120px)}
.hero::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-120px;border-radius:50%;background:rgba(217,242,79,.22);filter:blur(3px);pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:var(--content);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);align-items:center;gap:clamp(50px,7vw,110px)}
.hero-kicker{margin-bottom:20px;color:var(--teal-dark);font-size:.76rem;font-weight:800;letter-spacing:.15em}.hero h1{max-width:760px;font-family: var(--font-display);font-size:clamp(4rem,8vw,7.5rem);line-height:.88;font-weight:800;letter-spacing:-.075em}.hero h1 span{color:var(--teal)}
.hero-intro{max-width:600px;margin-top:30px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.7}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-art{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}.art-card{position:relative;z-index:3;width:min(390px,85%);min-height:410px;display:flex;flex-direction:column;justify-content:space-between;padding:38px;border-radius:38px;background:var(--text);box-shadow:0 35px 90px rgba(20,30,35,.25);transform:rotate(-4deg);transition:transform .4s ease}.hero-art:hover .art-card{transform:rotate(-1deg) translateY(-5px)}
.art-logo{color:#fff;font-family: var(--font-display);font-size:clamp(2.6rem,5vw,4rem);font-weight:800;letter-spacing:-.07em}.art-logo span{color:var(--lime)}.art-line{width:70px;height:5px;margin:26px 0;border-radius:999px;background:var(--coral)}.art-copy{color:rgba(255,255,255,.84);font-size:1.3rem;font-weight:600;line-height:1.5}
.art-chip{position:absolute;z-index:4;min-width:92px;height:48px;display:flex;align-items:center;justify-content:center;padding:0 16px;border-radius:999px;color:var(--text);font-size:.75rem;font-weight:800;letter-spacing:.10em;box-shadow:0 15px 40px rgba(30,35,40,.14)}.chip-one{top:52px;left:0;background:var(--lime);transform:rotate(8deg)}.chip-two{right:-3px;top:210px;color:#fff;background:var(--teal);transform:rotate(-5deg)}.chip-three{left:25px;bottom:16px;background:#fff;transform:rotate(-7deg)}
.ticker-strip{overflow:hidden;background:var(--teal)}.ticker-inner{min-height:64px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;padding:14px 22px;color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase}.ticker-inner i{color:var(--lime);font-size:1.2rem;font-style:normal}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-card{position:relative;min-height:370px;display:flex;flex-direction:column;padding:30px;overflow:hidden;border-radius:var(--radius-large);transition:transform .3s ease,box-shadow .3s ease}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-heavy)}.service-web{background:var(--teal);color:#fff}.service-care{background:var(--lime)}.service-design{background:#fff;border:1px solid var(--line)}.service-number{margin-bottom:auto;font-size:.72rem;font-weight:800;letter-spacing:.10em;opacity:.7}.service-icon{margin:40px 0 20px;font-size:2.4rem;font-weight:700}.service-card h3{margin-bottom:12px;font-family: var(--font-display);font-size:1.7rem;font-weight:800;letter-spacing:-.04em}.service-card p{margin-bottom:22px;opacity:.82}.service-card a{margin-top:auto;font-weight:800;font-size:.9rem}
.project-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:22px}.project-card{overflow:hidden;border-radius:var(--radius-large);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s ease}.project-card:hover{transform:translateY(-5px)}.project-visual{min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#ecebe6}.project-featured .project-visual{min-height:390px}.project-visual img{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:top;display:block}.project-featured .project-visual img{min-height:390px}.project-info{padding:26px 28px 30px}.project-info>span{color:var(--teal-dark);font-size:.73rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase}.project-info h3{margin:10px 0;font-family: var(--font-display);font-size:1.55rem;font-weight:800;letter-spacing:-.04em}.project-info p{margin-bottom:18px;color:var(--muted)}.project-info a{font-weight:800;color:var(--teal-dark)}
.network-card{padding:clamp(32px,5vw,60px);border-radius:44px;background:var(--text);color:#fff}.network-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:38px}.network-head .eyebrow{color:var(--lime)}.network-head h2{font-family: var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:.98;letter-spacing:-.06em}.news-list{border-top:1px solid rgba(255,255,255,.12)}.news-list article{display:grid;grid-template-columns:90px 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12)}.news-list article>span{color:var(--lime);font-size:.74rem;font-weight:800}.news-list strong{font-size:1rem;font-weight:600}.news-list small{color:rgba(255,255,255,.52)}
.contact-teaser{text-align:center}.contact-teaser-inner{padding:clamp(60px,8vw,100px) 30px;border-radius:48px;background:linear-gradient(135deg,#d9f24f,#efffa0)}.contact-teaser h2{margin-bottom:24px}.contact-teaser p{max-width:600px;margin:0 auto 28px;color:rgba(23,26,29,.72);font-size:1.05rem}
@media(max-width:1000px){.hero-inner{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-intro{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-art{min-height:440px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card:last-child{grid-column:1/-1}.project-grid{grid-template-columns:1fr}}
@media(max-width:720px){.hero{padding-left:16px;padding-right:16px}.hero h1{font-size:clamp(3.4rem,16vw,5rem)}.hero-art{min-height:380px}.art-card{min-height:340px;padding:30px}.service-grid{grid-template-columns:1fr}.service-card:last-child{grid-column:auto}.service-card{min-height:320px}.network-head{flex-direction:column;align-items:flex-start}.news-list article{grid-template-columns:1fr;gap:7px}.contact-teaser-inner{border-radius:34px}}
@media(max-width:460px){.art-chip{min-width:76px;height:42px;font-size:.66rem}.chip-one{left:-4px}.chip-two{right:-4px}.ticker-inner{gap:10px;font-size:.68rem}}

/* ==========================================================
   V0.5.1 - RESPONSIVE HARDENING
========================================================== */
.hero-inner,
.hero-copy,
.hero-art,
.section-head > *,
.service-card,
.project-card,
.network-card,
.contact-teaser-inner{
    min-width:0;
}

.hero h1{
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
}

.hero-intro{
    width:100%;
}

@media(max-width:720px){
    .hero{
        padding-top:38px;
        padding-bottom:70px;
        overflow:hidden;
    }

    .hero-inner{
        width:100%;
        gap:42px;
    }

    .hero-copy{
        width:100%;
    }

    .hero-kicker{
        font-size:.68rem;
        letter-spacing:.12em;
        margin-bottom:18px;
    }

    .hero h1{
        width:100%;
        font-size:clamp(2.85rem,10.7vw,3.85rem);
        line-height:.94;
        letter-spacing:-.065em;
    }

    .hero-intro{
        max-width:33rem;
        margin-top:24px;
        font-size:1rem;
        line-height:1.68;
    }

    .hero-actions{
        width:100%;
        max-width:420px;
        margin:26px auto 0;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .hero-actions .button{
        width:100%;
        min-width:0;
    }

    .hero-art{
        min-height:350px;
        width:100%;
    }

    .art-card{
        width:min(330px,82vw);
        min-height:325px;
        padding:27px;
        border-radius:30px;
    }

    .art-copy{
        font-size:1.08rem;
    }

    .project-visual,
    .project-featured .project-visual,
    .project-visual img,
    .project-featured .project-visual img{
        min-height:230px;
    }

    .network-card{
        border-radius:30px;
    }
}

@media(max-width:520px){
    .hero{
        padding-left:14px;
        padding-right:14px;
    }

    .hero::before{
        width:310px;
        height:310px;
        right:-125px;
        top:-80px;
    }

    .hero h1{
        font-size:clamp(2.6rem,10.3vw,3.25rem);
        line-height:.96;
        letter-spacing:-.06em;
    }

    .hero-intro{
        font-size:.98rem;
        padding:0 4px;
    }

    .hero-art{
        min-height:320px;
    }

    .art-card{
        width:min(295px,80vw);
        min-height:295px;
        padding:24px;
    }

    .art-logo{
        font-size:2.45rem;
    }

    .art-chip{
        min-width:68px;
        height:38px;
        padding:0 11px;
        font-size:.60rem;
    }

    .chip-one{left:2px;top:38px}
    .chip-two{right:0;top:150px}
    .chip-three{left:14px;bottom:4px}

    .ticker-inner{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        padding-left:18px;
        padding-right:18px;
    }

    .ticker-inner::-webkit-scrollbar{display:none}

    .ticker-inner span,
    .ticker-inner i{
        flex:0 0 auto;
    }

    .section-head h2,
    .contact-teaser h2,
    .network-head h2{
        font-size:clamp(2.25rem,11vw,3.2rem);
    }

    .service-card{
        min-height:280px;
        padding:24px;
        border-radius:28px;
    }

    .project-card{
        border-radius:28px;
    }

    .project-info{
        padding:22px;
    }

    .contact-teaser-inner{
        padding:48px 20px;
        border-radius:28px;
    }
}

@media(max-width:390px){
    .hero h1{
        font-size:clamp(2.3rem,10.15vw,2.75rem);
    }

    .hero-kicker{
        font-size:.62rem;
        letter-spacing:.09em;
    }

    .art-card{
        width:min(270px,78vw);
    }
}

/* ==========================================================
   V0.6 - HERO MOTION / TOUCH-FRIENDLY ANIMATION
========================================================== */

.hero-copy {
    animation: heroCopyIn .72s cubic-bezier(.2,.75,.25,1) both;
}

.hero-art.motion-ready .art-card {
    opacity: 0;
    transform: translateY(44px) rotate(-11deg) scale(.94);
}

.hero-art.motion-ready .art-chip {
    opacity: 0;
    transform: translateY(18px) scale(.9);
}

.hero-art.motion-ready.is-visible .art-card {
    opacity: 1;
    transform: translateY(0) rotate(-4deg) scale(1);
    transition:
        opacity .72s ease,
        transform .82s cubic-bezier(.16,.8,.24,1);
}

.hero-art.motion-ready.is-visible .chip-one {
    opacity: 1;
    transform: rotate(8deg) translateY(0) scale(1);
    transition: opacity .45s .30s ease, transform .55s .30s ease;
}

.hero-art.motion-ready.is-visible .chip-two {
    opacity: 1;
    transform: rotate(-5deg) translateY(0) scale(1);
    transition: opacity .45s .40s ease, transform .55s .40s ease;
}

.hero-art.motion-ready.is-visible .chip-three {
    opacity: 1;
    transform: rotate(-7deg) translateY(0) scale(1);
    transition: opacity .45s .50s ease, transform .55s .50s ease;
}

.hero-art.is-visible .art-card {
    animation: artFloat 8.5s 1.15s ease-in-out infinite;
}

.hero-art:hover .art-card {
    animation-play-state: paused;
    transform: rotate(-1deg) translateY(-5px);
}

@keyframes heroCopyIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes artFloat {
    0%, 100% {
        transform: translate3d(-8px, 0, 0) rotate(-4.5deg);
    }
    25% {
        transform: translate3d(6px, -8px, 0) rotate(-2.5deg);
    }
    50% {
        transform: translate3d(14px, 1px, 0) rotate(-1deg);
    }
    75% {
        transform: translate3d(-3px, -10px, 0) rotate(-3.5deg);
    }
}


.hero-art.is-visible .chip-one { animation: chipDriftOne 6.8s 1.8s ease-in-out infinite; }
.hero-art.is-visible .chip-two { animation: chipDriftTwo 7.6s 2.1s ease-in-out infinite; }
.hero-art.is-visible .chip-three { animation: chipDriftThree 7.1s 2.35s ease-in-out infinite; }

@keyframes chipDriftOne {
    0%,100% { transform: rotate(8deg) translate3d(0,0,0); }
    50% { transform: rotate(5deg) translate3d(6px,-5px,0); }
}
@keyframes chipDriftTwo {
    0%,100% { transform: rotate(-5deg) translate3d(0,0,0); }
    50% { transform: rotate(-2deg) translate3d(-7px,5px,0); }
}
@keyframes chipDriftThree {
    0%,100% { transform: rotate(-7deg) translate3d(0,0,0); }
    50% { transform: rotate(-4deg) translate3d(8px,-4px,0); }
}

@media (max-width:720px) {
    /* Auf Touch-Geräten übernimmt Scroll-/Load-Motion statt Hover. */
    .hero-art:hover .art-card {
        animation-play-state: running;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy,
    .hero-art.motion-ready .art-card,
    .hero-art.motion-ready .art-chip,
    .hero-art.is-visible .art-card {
        opacity: 1;
        animation: none !important;
        transform: none !important;
    }
}

/* V0.7.1 – Soft Coral
   Große Akzentflächen bleiben warm, aber deutlich ruhiger. */
.service-grid .service-card:nth-child(4) {
    background: #efa091;
    color: #25282a;
}


/* ==========================================================
   V0.8 · MICRO POLISH
========================================================== */
.art-card-main {
    --pointer-x: 0px;
    --pointer-y: 0px;
}

/* Mouse-only parallax is deliberately tiny; the existing float remains the star. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hero-art {
        perspective: 1000px;
    }
    .art-card-main {
        translate: var(--pointer-x) var(--pointer-y);
        transition: translate .18s ease-out;
    }
}

.service-card,
.project-card,
.network-card,
.contact-teaser-inner {
    will-change: transform, opacity;
}

/* ==========================================================
   V0.9 · HERO MOTION FIX
   V0.8 hatte im JS eine doppelte const-Deklaration. Zusätzlich
   pausiert die Kachel jetzt auch beim Hover nicht mehr.
========================================================== */
.hero-art:hover .art-card {
    animation-play-state: running;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-art.is-visible .art-card-main {
        animation: artFloat 8.5s 1.15s ease-in-out infinite;
    }
}