/* 
   3MI STUDIO
   Designed & coded by @luca */ 

:root{


--bg:#11110f;

--surface:#191814;

--surface2:#222019;

--cream:#d8c7a3;

--text:#f5f0e6;

--muted:#969084;


}

*{

box-sizing:border-box;

}

/* GLOBAL FONT  */


body {

    font-family:
    "Special Elite",
    cursive;

}

/* LOGO */

.logo {

    font-family:
    "Special Elite",
    cursive;

    font-weight:400;

    letter-spacing:5px;

}

/* HEADLINES */

h1,
h2,
h3 {

    font-family:
    "Special Elite",
    cursive;

    font-weight:400;

}

/* NAVIGATION */

.navbar a {

    font-family:
    "Special Elite",
    cursive;

    letter-spacing:2px;

}

/* MOVING BACKGROUND */



.background-layer{


    position:fixed;


    inset:-80px;


    z-index:-1;


    background:


    linear-gradient(
        rgba(0,0,0,.40),
        rgba(0,0,0,.68)
    ),

    url("../images/background.jpg");



    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;



    will-change:transform;


    transition:transform .15s ease-out;


}

/* WEBSITE CONTENT ABOVE BACKGROUND */


.page{


    position:relative;


    z-index:5;


    max-width:1400px;


    margin:auto;


    padding:30px 50px;


}

/* NAV */

.navbar{


    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;


}

.logo{


    font-size:34px;

    font-weight:900;

    letter-spacing:8px;

    color:var(--cream);


}

.logo span{


    display:block;

    font-size:9px;

    letter-spacing:5px;

    color:#8f887b;


}

nav{


    display:flex;

    gap:40px;


}

nav a{


    text-decoration:none;

    color:#aaa;

    font-size:13px;

    letter-spacing:2px;


}

nav a:hover{

    color:white;

}

.nav-button{


    background:var(--cream);

    border:none;

    padding:14px 25px;

    border-radius:30px;

    font-weight:700;

    cursor:pointer;


}

.navbar nav a {

    position:relative;

    text-decoration:none;

    color:#888;

    font-size:14px;

    letter-spacing:3px;

    transition:.3s;

}

/* Hover Farbe */

.navbar nav a:hover {

    color:#f5f0df;

}

/* Unterstrich Animation */

.navbar nav a::after {


    content:"";


    position:absolute;


    left:0;


    bottom:-8px;


    width:0;


    height:2px;


    background:var(--cream);


    transition:.35s;

    box-shadow:

    0 0 10px rgba(216,199,163,.7);


}

.navbar nav a:hover::after {


    width:100%;


}

/* HERO */

.hero{


    min-height:700px;

    display:grid;

    grid-template-columns:1fr 420px;

    align-items:center;

    gap:80px;


}

.tag{


    color:var(--cream);

    letter-spacing:4px;

    font-size:12px;


}

h1{

    color:var(--cream);

    font-size:110px;

    line-height:.9;

    margin:30px 0;

    letter-spacing:-5px;
}

.description{


    color:var(--muted);

    font-size:20px;

    max-width:800px;

    line-height:1.6;


}

.buttons{


    display:flex;

    gap:20px;

    margin-top:40px;


}

button{


    font-family:inherit;

}

.primary{
    background:var(--cream);
    color:#11110f;
    border:none;
    padding:18px 35px;
    border-radius:40px;
    font-weight:700;

    box-shadow:
        0 10px 30px rgba(216,199,163,.12);

    transition:.35s ease;
}

.primary:hover{
    transform:translateY(-4px);
    box-shadow:
        0 15px 40px rgba(216,199,163,.22);
}

.secondary{


    background:none;

    border:1px solid #555;

    color:white;

    padding:18px 35px;

    border-radius:40px;


}

/* CARD */

.hero-card{


    background:

    linear-gradient(

    145deg,

    #24221d,

    #13120f

);


    border-radius:30px;

    padding:30px;

    height:420px;


}

.card-top{


    letter-spacing:4px;

    color:#aaa;


}

.wave{


    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;


}

.wave span{


    width:5px;

    height:70px;

    background:var(--cream);

    border-radius:10px;


    animation:pulse 1.5s infinite alternate;


}

.wave span:nth-child(even){

    height:120px;

}

@keyframes pulse{


    from{

        transform:scaleY(.6);

    }


    to{

    transform:scaleY(1);

    }


}

.card-info{


    display:flex;

    justify-content:space-between;

    color:#888;

    font-size:12px;

}

.card-info strong{


    display:block;

    color:white;

    margin-top:10px;


}

/* =========================
   3MI STUDIO OBJECT
========================= */

.studio-object {

    width:100%;

    height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* KREIS */

.studio-object-inner {

    position:relative;

    width:360px;

    height:360px;

    border:1px solid rgba(216,199,163,.35);

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:var(--cream);

    background:
        radial-gradient(
            circle,
            rgba(216,199,163,.08),
            rgba(17,17,15,.15) 60%,
            rgba(17,17,15,.4)
        );

    box-shadow:
        0 0 40px rgba(216,199,163,.08),
        inset 0 0 40px rgba(216,199,163,.04);

}


/* DREHENDER RING ENTFERNT */


/* =========================
   NUMMER
========================= */

.object-number {

    position:absolute;

    top:65px;

    left:50%;

    transform:translateX(-50%);

    font-size:11px;

    letter-spacing:4px;

    color:var(--muted);

}

/* =========================
   LOGO
========================= */

.object-logo {

    font-size:72px;

    letter-spacing:10px;

    line-height:1;

    color:var(--cream);

}

/* =========================
   LINIE
========================= */

.object-line {

    width:80px;

    height:1px;

    margin:25px 0;

    background:var(--cream);

    opacity:.5;

}

/* =========================
   TEXT
========================= */

.object-text {

    text-align:center;

    font-size:10px;

    line-height:2;

    letter-spacing:4px;

    color:var(--muted);

}


/* =========================
   KLEINER PUNKT OBEN
========================= */

.studio-object-inner::before {

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border:1px solid var(--cream);

    border-radius:50%;

    top:15px;

    left:50%;

    transform:translateX(-50%);

    background:var(--bg);

}


/* =========================
   MOBILE
========================= */

@media(max-width:900px) {

    .studio-object {

        height:340px;

        margin-top:20px;

    }


    .studio-object-inner {

        width:280px;

        height:280px;

    }


    .object-logo {

        font-size:52px;

        letter-spacing:7px;

    }


    .object-number {

        top:48px;

    }


    .object-line {

        margin:18px 0;

        width:60px;

    }


    .object-text {

        font-size:8px;

        letter-spacing:3px;

    }

}

/* SERVICES */

.services{

    color:var(--cream);
    padding:140px 0;

    max-width:1200px;

    margin:0 auto;

}

.section-title{

    width:100%;
    
    text-align:center;

    color:var(--cream);

    letter-spacing:8px;

    font-size:15px;

    margin-bottom:50px;


}

.cards {

    display:grid;

    grid-template-columns:repeat(6, 1fr);

    gap:30px;

    max-width:1100px;

    margin:auto;

} 

/* obere 3 Karten */

.service-card:nth-child(1){

    grid-column:1 / 3;

}

.service-card:nth-child(2){

    grid-column:3 / 5;

}

.service-card:nth-child(3){

    grid-column:5 / 7;

}

/* untere 2 Karten zentriert */

.service-card:nth-child(4){

    grid-column:2 / 4;

}

.service-card:nth-child(5){

    grid-column:4 / 6;

}

.service-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.01)
        ),
        var(--surface);

    padding:40px;
    border-radius:25px;
    min-height:260px;

    border:1px solid rgba(216,199,163,.10);

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.service-card:hover{
    transform:translateY(-10px);

    border-color:rgba(216,199,163,.28);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35),
        0 0 30px rgba(216,199,163,.05);
}

.service-card h3{


    font-size:32px;

    margin:0 0 20px;


}

.service-card p{


    color:#999;

    line-height:1.6;


}

/* ARTIST */

.artist{

    color:var(--cream);

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1200px;

    width:100%;

    margin:0 auto;

    padding:120px 0;

}

.artist h2{

    color:var(--cream);

    font-size:80px;

    letter-spacing:-4px;

    margin:20px 0;

}

.artist-box{

    width:300px;

    height:300px;

    border-radius:50%;

    background:var(--cream);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-weight:900;

    font-size:35px;

}

footer{


    border-top:1px solid #333;

    padding:30px 0;

    display:flex;

    justify-content:space-between;

    color:#777;

}

@media (max-width: 900px) {

    .page{
        padding:20px;
    }

    .hero{

        grid-template-columns:1fr;
        gap:40px;
        min-height:auto;

    }

    .hero h1{

        font-size:55px;
        letter-spacing:-2px;

    }

    .description{

        font-size:16px;

    }

    .hero-card{

        width:100%;
        height:auto;

    }

    .cards{

        grid-template-columns:1fr;
        gap:20px;

    }

    .service-card{

        grid-column:auto !important;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .artist{

        flex-direction:column;

        align-items:center;

        gap:40px;

        text-align:center;

        padding:70px 0;

    }

    .artist h2{

        font-size:55px;

    }

    .artist-box{

        width:220px;
        height:220px;
        font-size:28px;

    }

}

/* PORTFOLIO */


.portfolio{


    padding:140px 0;


}

.portfolio-grid{


    max-width:1100px;


    margin:auto;


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:30px;


}

.portfolio-card{

    color:var(--cream);

    background:var(--surface);

    border-radius:25px;

    overflow:hidden;

    transition:.4s;


}

.portfolio-card:hover{


    transform:translateY(-10px);


}

.portfolio-card img{


    width:100%;


    height:250px;


    object-fit:cover;


}

.portfolio-card h3{


    padding:20px 25px 0;


    font-size:28px;


}

.portfolio-card p{


    padding:0 25px 25px;


    color:#999;


}

/* PAGE TRANSITION */

.fade{

    animation:pageEnter .8s ease;

}

@keyframes pageEnter{


    from{

        opacity:0;

        transform:translateY(20px);

        filter:blur(8px);

    }


    to{

        opacity:1;

        transform:translateY(0);

        filter:blur(0);

    }


}

@keyframes pageFade{


    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}

/* ACTIVE NAVBAR */
.navbar a.active{


    color:#d8c9a7;


}

.navbar a.active::after{


    width:100%;


}

/* NAV HOVER */

.navbar a{


    position:relative;


}

.navbar a::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-8px;


    height:2px;


    width:0;


    background:#d8c9a7;


    transition:.3s;


}

.navbar a:hover::after{


    width:100%;


}

/* PORTFOLIO */

.portfolio-hero{

    padding-top:120px;

    max-width:1100px;

    margin:auto;

}

.portfolio-hero h1{

    font-size:90px;

    line-height:.9;

    margin:30px 0;

}

.portfolio-grid{


    max-width:1200px;

    margin:100px auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;


}

.portfolio-card{


    position:relative;

    height:500px;

    overflow:hidden;

    border-radius:30px;

    background:#111;


}

.portfolio-card img{
    width:100%;
    height:100%;
    object-fit:cover;

    filter:
        saturate(.85)
        contrast(1.05);

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
}

.portfolio-card:hover img{
    transform:scale(1.06);

    filter:
        saturate(1)
        contrast(1.05);
}

.portfolio-overlay{


    position:absolute;

    bottom:0;

    left:0;

    right:0;

    padding:40px;

    background:

    linear-gradient(
    transparent,
    rgba(0,0,0,.85)
    );


}

.portfolio-overlay h2{


    font-size:35px;

    margin:0;


}

.portfolio-overlay p{


    color:#aaa;

    letter-spacing:2px;


}

/* PAGE TRANSITION */

.page-transition{

    animation:pageOut .6s ease forwards;

    filter:blur(5px);

}

@keyframes pageOut{


    from{

        opacity:1;

        transform:translateY(0);

    }


    to{

        opacity:0;

        transform:translateY(-20px);

    }


}

.page-leave{


    animation:pageLeave .5s ease forwards;


}

@keyframes pageLeave{


    from{

        opacity:1;

        transform:translateY(0);

        filter:blur(0);


    }



    to{


        opacity:0;

        transform:translateY(-20px);

        filter:blur(8px);


    }


}

/* 
   ABOUT IMAGE
 */


@media(max-width:900px){


    .about-image-section{

        width:100%;

        margin:50px 0;

    }

}

.about-image-card {

    position:relative;

    height:550px;

    overflow:hidden;

    border-radius:30px;

}

.about-image-card img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.about-image-card:hover img {

    transform:scale(1.08);

}

.about-overlay {

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    padding:40px;

    background:

    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

}

@media(max-width:900px){


    .about-overlay{

        padding:25px;

    }


    .about-overlay h2{

        font-size:30px;

    }


}

.about-overlay h2 {

    color:var(--cream);

    font-size:40px;

    margin-bottom:10px;

}


.about-overlay p {

    color:#aaa;

    letter-spacing:2px;

}

/* 
   MOBILE MENU
 */


.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:var(--cream);

    font-size:32px;

    cursor:pointer;

    font-family:inherit;

}

@media(max-width:900px){



    .navbar{

        position:relative;

    }




    .menu-toggle{

        display:block;

    }




    .nav-menu{

        position:absolute;

        top:80px;

        left:0;

        right:0;

        background:var(--surface);

        border-radius:20px;

        padding:30px;


        display:none;

        flex-direction:column;

        align-items:center;

        gap:25px;


        text-align:center;

        z-index:100;

    }




    .nav-menu.active{

        display:flex;

    }




    .nav-menu a{

        font-size:18px;

        color:var(--cream);

        letter-spacing:3px;

    }




    .nav-menu a::after{

        display:none;

    }



}

/* 
   3MI PORTFOLIO — COMPACT GRID
    */

.portfolio-grid{
    width:100%;
    max-width:1100px;
    margin:70px auto;
    
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

/* Karten kleiner und kompakter */
.portfolio-card{
    position:relative;
    height:auto;
    min-height:0;
    border-radius:20px;
    overflow:hidden;
    
    background:var(--surface);
    border:1px solid rgba(216,199,163,.10);
    
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.portfolio-card:hover{
    transform:translateY(-6px);
    border-color:rgba(216,199,163,.25);
    box-shadow:0 20px 50px rgba(0,0,0,.3);
}

/* Spotify Einbettung */
.spotify-card{
    width:100%;
    max-width:none;
    margin:0;
}

.spotify-embed{
    width:100%;
    margin:0;
}

.spotify-embed iframe{
    display:block;
    width:100% !important;
    height:180px !important;
    border:0;
    border-radius:16px;
}

/* Titel unter Spotify */
.portfolio-card h3{
    font-size:18px;
    padding:16px 18px 18px;
    margin:0;
    letter-spacing:1px;
}

/* 
   TABLET
    */

@media(max-width:1000px){

    .portfolio-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:20px;
    }

}

/* 
   HANDY
    */

@media(max-width:650px){

    .portfolio-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin:50px auto;
    }

    .portfolio-card{
        border-radius:18px;
    }

    .spotify-embed iframe{
        height:170px !important;
    }

    .portfolio-card h3{
        font-size:17px;
        padding:14px 16px 16px;
    }

}

/* 
   MOBILE MENU FIX
*/

.menu-toggle{

    display:none;

    background:var(--surface);

    border:none;

    color:var(--cream);

    font-size:28px;

    cursor:pointer;

    font-family:inherit;

    width:55px;

    height:55px;

    border-radius:15px;

    align-items:center;

    justify-content:center;

}

/* MOBILE */

@media(max-width:900px){


    .navbar{

        height:80px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        position:relative;

    }



    .logo{

        font-size:32px;

    }



    .menu-toggle{

        display:flex;

        margin-left:auto;

    }



    .nav-menu{

        position:absolute;

        top:90px;

        left:0;

        right:0;

        background:var(--surface);

        border-radius:20px;

        padding:30px;


        display:none;

        flex-direction:column;

        align-items:center;

        gap:25px;


        z-index:100;

    }



    .nav-menu.active{

        display:flex;

    }



    .nav-menu a{

        font-size:18px;

        color:var(--cream);

        letter-spacing:3px;

    }



    .nav-menu a::after{

        display:none;

    }


}


/* 
   3MI PREMIUM POLISH
    */

:root{
    --cream-bright:#f2e8cf;
    --line:rgba(216,199,163,.18);
}

/* Dezentes Licht über dem bestehenden Hintergrund */
.background-layer{
    filter:saturate(.88) contrast(1.04);
}

.page{
    position:relative;
}

.page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 78% 18%, rgba(216,199,163,.09), transparent 28%),
        radial-gradient(circle at 12% 82%, rgba(255,255,255,.035), transparent 24%);
}

/* Navigation */
.navbar{
    border-bottom:1px solid rgba(216,199,163,.08);
}

.navbar nav a{
    transition:color .3s ease, transform .3s ease;
}

.navbar nav a:hover{
    transform:translateY(-2px);
}

.nav-button,
.primary{
    background:linear-gradient(135deg,var(--cream-bright),var(--cream));
    box-shadow:0 10px 30px rgba(216,199,163,.12);
    transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.nav-button:hover,
.primary:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 38px rgba(216,199,163,.2);
    filter:brightness(1.04);
}

.secondary{
    border-color:rgba(216,199,163,.3);
    transition:transform .3s ease, border-color .3s ease, background .3s ease;
}

.secondary:hover{
    transform:translateY(-3px);
    border-color:var(--cream);
    background:rgba(216,199,163,.06);
}

/* Hero */
.hero{
    position:relative;
}

.hero > *{
    animation:premiumReveal .8s ease both;
}

.hero > *:nth-child(2){
    animation-delay:.12s;
}

.tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
}

.tag::before,
.tag::after {
    content:"";
    width:28px;
    height:1px;
    background:var(--cream);
    box-shadow:0 0 12px rgba(216,199,163,.45);
}

h1,
.artist h2{
    text-shadow:0 8px 40px rgba(0,0,0,.3);
}

/* Studio-Objekt: statisch statt drehend */
.studio-object::before{
    animation:none !important;
    border-color:rgba(216,199,163,.2);
    box-shadow:0 0 45px rgba(216,199,163,.06);
}

.studio-object::after{
    box-shadow:inset 0 0 30px rgba(216,199,163,.04);
}

.studio-object-inner{
    transition:transform .45s ease, box-shadow .45s ease;
}

.studio-object-inner:hover{
    transform:scale(1.025);
    box-shadow:
        0 25px 70px rgba(0,0,0,.5),
        0 0 45px rgba(216,199,163,.12);
}

/* Karten */
.service-card,
.portfolio-card,
.hero-card{
    border:1px solid rgba(216,199,163,.08);
    box-shadow:0 20px 60px rgba(0,0,0,.16);
}

.service-card{
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:30px;
    right:30px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(216,199,163,.35),transparent);
    opacity:.7;
}

.service-card:hover{
    border-color:rgba(216,199,163,.2);
    box-shadow:0 25px 70px rgba(0,0,0,.28);
}

/* Portfolio */
.portfolio-card{
    box-shadow:0 25px 70px rgba(0,0,0,.25);
}

.portfolio-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border:1px solid rgba(216,199,163,.12);
    border-radius:inherit;
    opacity:0;
    transition:opacity .4s ease;
}

.portfolio-card:hover::after{
    opacity:1;
}

.portfolio-card img{
    filter:saturate(.9);
}

.portfolio-overlay{
    padding-top:70px;
}

/* Artist-Bereich */
.artist-box{
    position:relative;
    box-shadow:
        0 25px 70px rgba(0,0,0,.3),
        0 0 50px rgba(216,199,163,.08);
    transition:transform .4s ease, box-shadow .4s ease;
}

.artist-box:hover{
    transform:translateY(-8px) rotate(1deg);
    box-shadow:
        0 35px 85px rgba(0,0,0,.4),
        0 0 65px rgba(216,199,163,.14);
}

/* Dezente Section-Trenner */
.services,
.portfolio,
.artist{
    position:relative;
}

.services::before,
.portfolio::before,
.artist::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(900px,70%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(216,199,163,.14),transparent);
}

/* Footer */
footer{
    border-top-color:rgba(216,199,163,.12);
}

/* Bewegungen bei reduzierter Animation deaktivieren */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}

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

/* 
   3MI STUDIO — CLEAN FINAL OVERRIDES
    */

html{scroll-behavior:smooth;}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--cream);color:var(--bg);}

.navbar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.nav-button,.primary{box-shadow:0 10px 30px rgba(216,199,163,.12),inset 0 1px 0 rgba(255,255,255,.18);}

.hero h1,.artist h2{text-shadow:0 8px 40px rgba(0,0,0,.3);}
.tag{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;}
.tag::before,.tag::after{content:"";width:28px;height:1px;flex:0 0 28px;background:var(--cream);box-shadow:0 0 12px rgba(216,199,163,.45);}

.hero-card,.service-card,.portfolio-card{border:1px solid rgba(216,199,163,.10);}
.hero-card{position:relative;overflow:hidden;}
.hero-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 25%,rgba(216,199,163,.08),transparent 38%);}

.studio-object-inner{transition:transform .45s ease,box-shadow .45s ease;}
.studio-object-inner:hover{transform:scale(1.025);box-shadow:0 25px 70px rgba(0,0,0,.5),0 0 45px rgba(216,199,163,.12);}

.service-card{position:relative;overflow:hidden;}
.service-card::before{content:"";position:absolute;top:0;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(216,199,163,.35),transparent);opacity:.7;}
.service-card h3{transition:transform .35s ease,color .35s ease;}
.service-card:hover h3{transform:translateX(4px);color:var(--cream);}
.service-card p{transition:color .35s ease;}
.service-card:hover p{color:#b4aea2;}

.portfolio-card{position:relative;isolation:isolate;}
.portfolio-card::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(216,199,163,.12);border-radius:inherit;opacity:0;transition:opacity .4s ease;}
.portfolio-card:hover::after{opacity:1;}
.portfolio-card:hover{transform:translateY(-10px) scale(1.008);}

.about-image-card{box-shadow:0 25px 70px rgba(0,0,0,.28),0 0 45px rgba(216,199,163,.05);}
.artist-box{box-shadow:0 25px 70px rgba(0,0,0,.3),0 0 50px rgba(216,199,163,.08);}

footer{border-top-color:rgba(216,199,163,.12);}

a:focus-visible,button:focus-visible{outline:1px solid var(--cream);outline-offset:5px;}

@media(max-width:900px){
  .hero{padding-top:30px;}
  .hero h1{font-size:clamp(48px,13vw,70px);line-height:.94;}
  .buttons{flex-wrap:wrap;}
  .services,.portfolio{padding:90px 0;}
  .portfolio-hero{padding-top:70px;}
  .portfolio-hero h1{font-size:clamp(48px,13vw,70px);}
  .about-image-card{height:420px;}
  footer{flex-wrap:wrap;gap:20px;}
}

@media(max-width:520px){
  .page{padding-left:18px;padding-right:18px;}
  .tag{font-size:10px;letter-spacing:3px;}
  .tag::before,.tag::after{width:20px;flex-basis:20px;}
  .description{font-size:15px;line-height:1.55;}
  .buttons{flex-direction:column;width:100%;}
  .primary,.secondary{width:100%;min-height:54px;}
  .hero-card{padding:22px;}
  .studio-object-inner::after{inset:16px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* 
   3MI STUDIO
    */
@media (max-width:900px){
    .navbar{
        position:relative;
        z-index:1000;
        isolation:isolate;
    }

    .menu-toggle{
        position:relative;
        z-index:3000;
        pointer-events:auto;
        touch-action:manipulation;
    }

    .nav-menu{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        z-index:2000;
        pointer-events:none;
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .nav-menu.active{
        display:flex;
        pointer-events:auto;
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav-menu a{
        position:relative;
        z-index:2001;
        display:block;
        pointer-events:auto;
        touch-action:manipulation;
    }
}

@media (prefers-reduced-motion:reduce){
    .nav-menu{
        transition:none;
        transform:none;
    }
}

/* 
   3MI PORTFOLIO – FINAL GRID
    */

.portfolio-grid {
    width: 94%;
    max-width: 1250px;
    margin: 60px auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* KARTEN */

.portfolio-card.spotify-card {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;

    overflow: hidden;
    border-radius: 20px;
}


/* SPOTIFY */

.spotify-embed {
    width: 100%;
    margin: 0;
    padding: 0;
}

.spotify-embed iframe {
    display: block;
    width: 100% !important;
    height: 170px !important;

    border: 0;
    border-radius: 16px;
}


/* TITEL */

.portfolio-overlay {
    position: static;
    padding: 14px 16px 16px;
}

.portfolio-overlay h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}


/* 
   TABLET – 2 KARTEN
    */

@media (max-width: 700px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

}


/* 
   HANDY – 1 KARTE
    */

@media (max-width: 500px) {

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .spotify-embed iframe {
        height: 170px !important;
    }

}

/* 
   LANGUAGE SWITCH
*/

.language-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin: 4px 0 0 0;

    position: absolute;
    left: 0;
    transform: none;

    white-space: nowrap;
    z-index: 3001;
}

.language-switch button {
    appearance: none;
    border: 0;
    background: transparent;

    color: var(--muted);
    font-family: inherit;
    font-size: 9px;
    letter-spacing: 1px;

    padding: 0;
    margin: 0;

    cursor: pointer;

    transition: color 0.2s ease, opacity 0.2s ease;
}

.language-switch button:hover,
.language-switch button.active {
    color: var(--cream);
}

.language-switch span {
    color: var(--muted);
    opacity: 0.55;
    font-size: 8px;
}


/* MOBILE */

@media (max-width: 900px) {

    .language-switch {
        margin: 4px 0 0 0;

        left: 0;
        transform: none;
    }

    .language-switch button {
        font-size: 9px;
        padding: 0;
    }

    .language-switch span {
        font-size: 8px;
    }
}