html {scroll-behavior: smooth;}
:root {--bg:#091D34;--text:#fff;--muted:rgba(255,255,255,0.75);--accent:#5e5d5d;--max-width:1200px;}
* {box-sizing:border-box;margin:0;padding:0;}
body {font-family:Poppins, sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}

/* Header */
header {display:flex;align-items:center;justify-content:space-between;padding:24px;position:fixed;top:0;left:0;width:100%;z-index:10;}
.logo {display:flex;align-items:center;gap:12px;}
.logo .mark {width:32px;height:32px;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,0.4);}.logo span {font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:0.6px;color:#fff;}
nav {display:flex;gap:22px;align-items:center;font-size:15px;}
nav a {color:#fff;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,0.7);transition:color 0.3s;}
nav a:hover {color:var(--accent);}
@media(max-width:760px){header{padding:14px;}nav{gap:12px;font-size:14px;}}

/* Hero Section */
.wrap {min-height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;padding: 40px 20px;}
.wrap::before {content:"";position:absolute;top:0;right:0;width:100%;height:100%;background-image:url('resources/images/main.png');background-size:cover;background-position:center;background-repeat:no-repeat;/* Hintergrundbild */background-image: url('resources/images/placeholder.png');background-size: cover;background-position: center;background-repeat: no-repeat;opacity: 0.25;pointer-events:none;}
.wrap::after {content:"";position:absolute;top:0;right:0;width:1%;height:100%;pointer-events:none;}
.container {width:100%;max-width:var(--max-width);display:flex;align-items:center;justify-content:center;gap:20px;}
.hero {display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;z-index:5;width:100%;margin:auto;padding:60px 20px;}
.hero h1 {margin:0 0 18px 0;font-family:Montserrat,sans-serif;font-weight:800;font-size:72px;line-height:0.95;letter-spacing:-1px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,0.5);}
.hero p {margin:0;font-size:22px;color:var(--muted);font-weight:500;}
.hero a.button {display:inline-block;margin-top:30px;padding:14px 32px;background:var(--accent);color:#fff;border-radius:6px;font-weight:600;text-decoration:none;transition:0.3s ease;}
.hero a.button:hover {background:#c00a04;transform:translateY(-2px);}
.hero a.button {background-color: #091D34;border: 1px solid #ffffff59 ;color: #fff;padding: 12px 25px;border-radius: 25px;font-size: 0.95rem;cursor: pointer;margin-top: 20px;transition: background 0.3s;}
.hero a.button:hover {background-color: #2060aa;}
@media(max-width:1000px){.wrap::before,.wrap::after{width:60%}.hero h1{font-size:56px}}
@media(max-width:760px){.hero{width:100%;padding:30px}.wrap::before,.wrap::after{display:none}.hero h1{font-size:36px}.hero p{font-size:18px}}

/* About Section */
#about{max-width:var(--max-width); margin:0 auto; padding:80px 20px; display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start;}
.about-img{flex:1 1 450px; max-width:600px;}
.about-img img{width:100%; border-radius:8px; border: 1px solid; border-color: #6ED2D3;}
.about-text{flex:2 1 500px;}
.about-text h2{font-family:Montserrat,sans-serif;font-size:36px;margin-bottom:10px;}
.about-text p{color:var(--muted);margin-bottom:20px;}
.info{display:flex;gap:40px;margin-bottom:20px;flex-wrap:wrap;}
.info div{display:flex;flex-direction:column;gap:4px;}
.info div span{color:var(--muted);}
.social-icons{display:flex;gap:12px;margin-top:20px;}
.social-icons a img{width:24px;height:24px;filter:brightness(0) invert(1);transition:transform 0.3s ease;}
.social-icons a:hover img{transform:scale(1.2);}
@media(max-width:900px){#about{flex-direction:column;align-items:center}.about-text{text-align:center}.info{justify-content:center}}
@media (max-width: 760px) {.about-container {padding: 40px 20px;}#about h2 {font-size: 36px;}#about h3 {font-size: 18px;}.about-content p {font-size: 16px;}}

/* --- Dienstleistungen Section (professionell überarbeitet) --- */
#services {padding: 60px 20px;background: radial-gradient(circle at top, #0f2a4c 0%, #091D34 100%);text-align: center;color: var(--text);position: relative;}
#dienstleistungen::before {content: "";position: absolute;inset: 0;background: url('resources/images/pattern.png') center/cover no-repeat;opacity: 0.05;}
.services-container {max-width: var(--max-width);margin: 0 auto;position: relative;z-index: 1;}
.services-container h1 {font-size: 2.8em;color: #6ED2D3;margin-bottom: 20px;font-family: 'Montserrat', sans-serif;}
.services-subtitle {color: var(--muted);font-size: 1.1em;max-width: 700px;margin: 0 auto 40px auto;line-height: 1.7;}
.services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 40px;justify-content: center;align-items: stretch;}
.service-card {background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 14px;padding: 30px 25px;transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;text-align: left;position: relative;overflow: hidden;}
.service-card:hover {transform: translateY(-8px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);border-color: #6ED2D3;}
.service-card .icon {overflow: hidden;border-radius: 10px;margin-bottom: 20px;}
.service-card img {width: 100%;height: 180px;object-fit: cover;transition: transform 0.4s ease;border-radius: 8px;}
.service-card:hover img {transform: scale(1.08);}
.service-card h3 {color: #6ED2D3;font-size: 1.4em;margin-bottom: 10px;font-weight: 700;}
.service-card p {color: var(--muted);font-size: 1em;line-height: 1.6;}
.services-footer {margin-top: 40px;margin-bottom: 0px;max-width: 800px;margin-left: auto;margin-right: auto;}
.services-footer h2 {color: #6ED2D3;font-size: 1.8em;margin-bottom: 15px;}
.services-footer p {color: var(--muted);line-height: 1.7;font-size: 1.05em;}
@media (max-width: 768px) {#services {padding: 100px 20px;}.services-container h1 {font-size: 2.2em;}.service-card {text-align: center;}.service-card p {font-size: 0.95em;}}

/* Kontakt Section */
#contact {max-width: var(--max-width);margin: 0 auto;max-height:100vh; padding: 20px 20px;margin-top:150px; padding-bottom: 170px;color: #fff;}
#contact .title {font-size: 2.5rem;font-weight: 700;margin-bottom: 20px;text-align: left; color:#6ED2D3;}
.contact-content {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 50px;margin-top: 20px;}
.message-box,.contact-info {background-color: #0d2949;;flex: 1 1 45%;padding: 30px;border-radius: 12px; border: 1px solid #ffffff59;}
.message-box h3,.contact-info h3 {font-size: 1.4rem;margin-bottom: 20px;}
.input-group {display: flex;gap: 15px;}
input,textarea {width: 100%;background-color: #091d33;border: 1px solid #ffffff59;;border-radius: 5px;color: #ffffff;padding: 12px;margin-top: 15px;font-size: 0.95rem;outline: none;transition: border-color 0.3s;}
input:focus,textarea:focus {border-color: #2060aa;}
button {background-color: #091D34;border: 1px solid #ffffff59 ;color: #fff;padding: 12px 25px;border-radius: 25px;font-size: 0.95rem;cursor: pointer;margin-top: 20px;transition: background 0.3s;}
button:hover {background-color: #2060aa;}
.contact-info ul {list-style: none;text-align: left;margin-top: 20px;}
.contact-info li {margin-bottom: 20px;line-height: 1.5;}
strong {color: #fff;}