* {
    box-sizing: border-box;
}


:root {

    --bg: #080808;
    --card: #1d1d1d;
    --card-hover: #242424;
    --gold: #d4af37;
    --gold-light: #f0d477;
    --text: #ffffff;
    --muted: #aaaaaa;

}



body {

    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:"Segoe UI",Arial,sans-serif;

}



/* HEADER */


header {

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 60px;

    background:rgba(0,0,0,.85);

    border-bottom:1px solid rgba(212,175,55,.3);

}



.logo {

    color:var(--gold);

    font-size:28px;

    font-weight:bold;

    letter-spacing:2px;

}



nav a {

    color:#ddd;

    text-decoration:none;

    margin-left:30px;

    font-size:16px;

}



nav a:hover {

    color:var(--gold);

}



/* HERO */


.hero {

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;


    background:

    linear-gradient(

        rgba(0,0,0,.65),

        rgba(0,0,0,.85)

    ),

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


    background-size:cover;

    background-position:center;

}



.hero-content h1 {

    font-size:55px;

    margin:0;

}



.hero-content span {

    color:var(--gold);

}



.hero-content p {

    font-size:21px;

    color:#ddd;

    margin:25px 0;

}



.main-button {

    display:inline-block;

    padding:14px 35px;

    background:var(--gold);

    color:#111;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

}



/* TITEL */


.section-title {

    text-align:center;

    margin:55px 0 35px;

    font-size:36px;

}



.section-title span {

    color:var(--gold);

}



/* KATEGORIEN */


.category-grid {

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:20px;

    padding:20px;

}



.category {

    display:block;

    text-decoration:none;

    background:#171717;

    border:1px solid rgba(212,175,55,.35);

    padding:22px;

    text-align:center;

    border-radius:12px;

    color:var(--gold);

    font-size:17px;

    transition:.3s;

}



.category:hover {

    background:#222;

    border-color:var(--gold);

    transform:translateY(-3px);

}



/* PROFILE */


.profile-grid {

    max-width:1350px;

    margin:auto;

    padding:25px;

    display:grid;

    grid-template-columns:repeat(auto-fit,300px);

    justify-content:center;

    gap:30px;

}



.profile-card {

    background:var(--card);

    border-radius:18px;

    overflow:hidden;

    border:1px solid #333;

    transition:.3s;

}



.profile-card:hover {

    transform:translateY(-5px);

    border-color:var(--gold);

}



.profile-card img {

    width:100%;

    height:330px;

    object-fit:cover;

}



.profile-content {

    padding:20px;

    text-align:center;

}



.profile-content h3 {

    margin:0 0 5px;

    color:var(--gold);

    font-size:28px;

}



.stars {

    color:#ffd700;

    font-size:21px;

    margin:8px;

}



.status {

    color:#55ff55;

    font-size:14px;

}



.profile-content p {

    color:#ddd;

    line-height:22px;

    min-height:55px;

}



.phone {

    margin:15px 0;

}



.phone a {

    color:white;

    text-decoration:none;

    font-size:18px;

}



.price {

    color:var(--gold);

    font-size:20px;

    font-weight:bold;

    margin:18px 0;

}



/* BUTTONS */


.profile-button,

.call-button {

    display:block;

    padding:13px;

    border-radius:8px;

    text-decoration:none;

    font-weight:bold;

    margin-top:10px;

}



.profile-button {

    background:#333;

    color:white;

}



.call-button {

    background:linear-gradient(

        180deg,

        #e6c45c,

        #b8860b

    );

    color:#111;

}



/* PROFIL DETAIL */


.profile-detail {

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px 20px;

}



.profile-container {

    width:100%;

    max-width:650px;

    background:var(--card);

    border-radius:20px;

    border:1px solid rgba(212,175,55,.35);

    padding:35px;

    text-align:center;

}



.profile-image {

    width:260px;

    height:260px;

    object-fit:cover;

    border-radius:18px;

}



.profile-container .name {

    color:var(--gold);

    font-size:36px;

    font-weight:bold;

    margin:20px 0;

}



.description {

    color:#ddd;

    font-size:18px;

    line-height:30px;

    margin:25px 0;

}



.phone-button {

    display:inline-block;

    background:linear-gradient(

        180deg,

        #e6c45c,

        #b8860b

    );

    color:#111;

    padding:15px 35px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

}



.profile-container .button {

    display:inline-block;

    background:#333;

    color:white;

    padding:12px 25px;

    border-radius:10px;

    text-decoration:none;

}



/* INFO */


.info {

    max-width:900px;

    margin:60px auto;

    text-align:center;

    padding:20px;

}



.info p {

    color:#ccc;

    font-size:18px;

    line-height:30px;

}



/* FAQ */


.faq {

    max-width:900px;

    margin:auto;

    padding-bottom:60px;

}



.faq div {

    background:#171717;

    padding:18px;

    margin:10px;

    border-radius:10px;

    border:1px solid #333;

}



/* FOOTER */


footer {

    text-align:center;

    padding:30px;

    background:#050505;

    color:#888;

}



/* MOBILE */


@media(max-width:800px){


    header {

        padding:0 20px;

    }



    nav {

        display:none;

    }



    .hero-content h1 {

        font-size:38px;

    }



    .profile-grid {

        grid-template-columns:1fr;

    }



    .profile-card {

        width:300px;

        margin:auto;

    }



    .profile-image {

        width:220px;

        height:220px;

    }

}