:root{--accent:#949291;--muted:#4f5e4b;--bg:#f7f9fb}
        *{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,"Helvetica Neue",Arial;background:var(--bg);color:#111}
        header{background:#fff;border-bottom:1px solid #e6e9ee;position:sticky;top:0;z-index:10}
        .container{max-width:1100px;margin:0 auto;padding:1rem}
        .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
        .brand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--accent);text-decoration:none}
        .brand .logo{width:120px;height:120px;background:linear-gradient(135deg,var(--accent),#000000);border-radius:7px;display:inline-block}
        nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
        nav a{color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:6px}
        nav a:hover{background:#f1f5f9;color:#111}
        .hero{padding:3.25rem 0;text-align:center}
        .hero h1{margin:0;font-size:clamp(1.5rem,3.5vw,2.25rem)}
        .hero p{color:var(--muted);margin:.6rem auto 1.2rem;max-width:60ch}
        /* hero2: same layout as .hero but with a slightly gray background */
        .hero2{padding:3.25rem 0;text-align:center}
        .hero2 h1,.hero2 h2{margin:0;font-size:clamp(1.5rem,3.5vw,2.25rem)}
        .hero2 p{color:var(--muted);margin:.6rem auto 1.2rem;max-width:60ch}
        /* card2: same layout as .card but with a slightly gray background */
        .card2{background:#f3f5f7;padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(13,38,59,.06)}
       .whylist{list-style:circle;margin:0 auto auto 19%;padding-left:1rem;text-align:left}
       .whylist p{font-weight:500;}

        .btn{background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:8px;text-decoration:none;display:inline-block;cursor:pointer;border:none;transition:all 0.2s ease}
        .btn:hover{background:#7a7a77;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
        .btn:active{background:#6a6a67;transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,0.1)}
        .grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1rem}
        .card{background:#fff;padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(13,38,59,.06)}
        footer{padding:1.5rem 0;text-align:center;color:var(--muted);font-size:.9rem}
        .footer-links{display:flex;gap:1rem;justify-content:center;margin-bottom:.5rem}
        footer a{color:var(--muted);text-decoration:none}
        footer a:hover{color:#111}
        form{display:grid;gap:.6rem}
        input,textarea{width:100%;padding:.6rem;border:1px solid #e6e9ee;border-radius:8px;font:inherit}
        /* center text inside form fields on the contact form */
        #contactForm input[type="text"],
        #contactForm input[type="email"],
        #contactForm input[type="date"],
        #contactForm input[type="number"],
        #contactForm textarea,
        #contactForm select {
            text-align: center;
        }
        @media (max-width:700px){
            .nav{gap:.5rem}
            nav ul{display:none}
            /* show nav-toggle button only on small screens */
            .container.nav .nav-toggle{display:inline-flex}
            /* mobile menu: when parent .nav has .open show dropdown */
            .container.nav.open nav ul{
                display:flex;
                flex-direction:column;
                position:absolute;
                right:1rem;
                top:calc(100% + 0.5rem);
                background:#fff;
                padding:0.75rem;
                border-radius:8px;
                box-shadow:0 8px 24px rgba(13,38,59,.12);
                min-width:200px;
                z-index:50;
            }
            .container.nav.open nav ul li{margin:0}
            .container.nav.open nav ul li a{display:block;padding:.6rem .8rem}
        }

/* Hamburger button */
.nav .nav-toggle{display:none;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;width:40px;height:40px;padding:6px;order:3}
.nav .nav-toggle .hamburger{position:relative;width:22px;height:2px;background:var(--muted);display:block;border-radius:2px}
.nav-toggle .hamburger:before,.nav-toggle .hamburger:after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--muted);border-radius:2px;transition:transform .2s ease,top .2s ease}
.nav-toggle .hamburger:before{top:-7px}
.nav-toggle .hamburger:after{top:7px}
.nav .nav-toggle .hamburger:before,.nav .nav-toggle .hamburger:after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--muted);border-radius:2px;transition:transform .2s ease,top .2s ease}
.nav .nav-toggle .hamburger:before{top:-7px}
.nav .nav-toggle .hamburger:after{top:7px}
.container.nav.open .nav-toggle .hamburger{background:transparent}
.container.nav.open .nav-toggle .hamburger:before{transform:rotate(45deg);top:0}
.container.nav.open .nav-toggle .hamburger:after{transform:rotate(-45deg);top:0}

/* ensure nav sits to the left of the toggle */
.nav nav{order:2;margin-left:auto}

/* Image Referenzen Thumbnails */
.img_Referenzen{display:grid;gap:0.75rem;grid-template-columns:repeat(4, 1fr);margin-top:1rem}
.img_Referenzen .thumb{display:block;overflow:hidden;border-radius:8px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 12px rgba(13,38,59,.1)}
.img_Referenzen .thumb:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(13,38,59,.2)}
.img_Referenzen .thumb img{width:100%;height:120px;object-fit:cover;display:block}

/* Profile image used on the Über mich page */
.profile-img{float:right;margin:0 0 2rem 2rem;max-width:300px;border-radius:8px;display:block}

@media (max-width:700px){
    .profile-img{float:none;margin:0 auto 1.5rem auto;max-width:80%;}
}