/* lennartmirbach.de – gemeinsame Styles (Startseite + Unterseiten) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "DM Sans", sans-serif; font-weight: 400; color: #0D1B2A; background: #f8f7f4; line-height: 1.7; }

nav { position: sticky; top: 0; z-index: 100; background: #0D1B2A; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 2.5rem; }
.nav-logo img { height: 44px; width: auto; display: block;  }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: #7D8FA3; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: #C9A84C; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.25rem; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: #fff; margin: 5px 0; }
@media (max-width: 640px) {
  nav { padding: 0.75rem 1.25rem; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 62px; left: 0; right: 0; background: #0D1B2A; flex-direction: column; gap: 0; padding: 0.5rem 0; border-top: 1px solid #1e3048; }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: 0.85rem 1.5rem; font-size: 0.95rem; }
}

section { padding: 5rem 3.5rem; max-width: 1440px; margin: 0 auto; }
@media (max-width: 640px) { section { padding: 3.5rem 1.25rem; } }

.hero-wrap { background: #0D1B2A; }
.hero { padding-top: 6rem; padding-bottom: 6rem; }
@media (max-width: 640px) { .hero { padding-top: 4rem; padding-bottom: 4rem; } }
.hero-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; margin-bottom: 1.5rem; }
.hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.55em; row-gap: 0.1em; font-family: "Cormorant Garamond", serif; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.15; color: #fff; margin-bottom: 1.75rem; white-space: nowrap; }
.hero h1 em { font-style: italic; color: #C9A84C; }
@media (max-width: 900px) { .hero h1 { white-space: normal; font-size: clamp(2rem, 5.5vw, 2.8rem); } }
.hero-sub { font-size: clamp(0.95rem, 2.5vw, 1.05rem); color: #7D8FA3; max-width: 780px; margin-bottom: 2.5rem; line-height: 1.8; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-primary { display: inline-block; background: #C9A84C; color: #0D1B2A; padding: 0.85rem 2rem; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; border: none; cursor: pointer; font-family: "DM Sans", sans-serif; transition: background 0.2s; text-transform: uppercase; }
.btn-primary:hover { background: #b8963e; }
.btn-outline { display: inline-block; border: 1px solid #7D8FA3; color: #7D8FA3; padding: 0.85rem 2rem; font-size: 0.88rem; letter-spacing: 0.06em; text-decoration: none; transition: all 0.2s; cursor: pointer; font-family: "DM Sans", sans-serif; background: transparent; text-transform: uppercase; }
.btn-outline:hover { border-color: #C9A84C; color: #C9A84C; }
@media (max-width: 400px) { .btn-primary, .btn-outline { width: 100%; text-align: center; } }

.divider { border: none; border-top: 1px solid #e0ddd6; max-width: 1440px; margin: 0 auto; }

.about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3.5rem; align-items: start; }
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } }
.section-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #C9A84C; margin-bottom: 1rem; }
.about-avatar { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; display: block; filter: grayscale(100%); }
@media (max-width: 640px) { .about-avatar { aspect-ratio: 3/4; max-height: 420px; width: 100%; object-position: top center; } }
.about-content h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 600; color: #0D1B2A; margin-bottom: 1.25rem; line-height: 1.2; }
.about-content p { color: #445566; margin-bottom: 1.1rem; font-size: 1.08rem; }
.about-region { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 3px solid #C9A84C; }
.about-content .about-region .section-label { margin-bottom: 0.35rem; color: #C9A84C; font-size: 0.75rem; }
.about-region p { margin-bottom: 0; }
.skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.skill-tag { font-size: 0.88rem; border: 1px solid #C9A84C; padding: 0.4rem 1rem; color: #7A4A1A; letter-spacing: 0.04em; background: #fdf8ee; }

.section-header { margin-bottom: 3.5rem; }
.section-header h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 600; color: #0D1B2A; margin-bottom: 0.6rem; line-height: 1.2; }
.section-header p { color: #7D8FA3; font-size: 1.1rem; }

.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
.service-card { background: #fff; border: 1px solid #e0ddd6; border-top: 3px solid #C9A84C; padding: 2.25rem 2rem; }
.service-num { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #C9A84C; color: #0D1B2A; font-weight: 700; font-size: 1.6rem; margin-bottom: 1.25rem; font-family: "Cormorant Garamond", serif; }
.service-card h3 { font-family: "Cormorant Garamond", serif; font-size: 1.55rem; font-weight: 600; color: #0D1B2A; margin-bottom: 0.75rem; line-height: 1.3; }
.service-card p { font-size: 1.05rem; color: #556677; line-height: 1.75; }

/* PROJEKTE */
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 600px) { .projects-grid { grid-template-columns: 1fr; } }
.project-card { background: #fff; border: 1px solid #e0ddd6; overflow: hidden; cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; }
.project-card:hover { box-shadow: 0 4px 20px rgba(13,27,42,0.12); transform: translateY(-2px); }
.project-img { width: 100%; height: 320px; object-fit: contain; object-position: center; display: block; background: #f0ede8; padding: 1rem; }
.project-body { padding: 1.75rem 2rem; }
.project-tag { font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: #C9A84C; margin-bottom: 0.6rem; font-weight: 500; }
.project-body h3 { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 600; color: #0D1B2A; margin-bottom: 0.5rem; line-height: 1.3; }
.project-body p { font-size: 1rem; color: #556677; line-height: 1.65; }

/* PROJEKT-MODAL */
.project-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(13,27,42,0.72); z-index: 200; align-items: center; justify-content: center; padding: 2rem 1rem; }
.project-modal-overlay.active { display: flex; }
.project-modal { background: #fff; max-width: 820px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; }
.project-modal-img { width: 100%; max-height: 46vh; object-fit: contain; background: #f0ede8; display: block; padding: 1.5rem; }
.project-modal-body { padding: 1.75rem 2.25rem 2.25rem; }
.project-modal-tag { font-size: 0.85rem; letter-spacing: 0.09em; text-transform: uppercase; color: #C9A84C; margin-bottom: 0.6rem; font-weight: 500; }
.project-modal-title { font-family: "Cormorant Garamond", serif; font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 600; color: #0D1B2A; margin-bottom: 1.1rem; line-height: 1.25; }
.project-modal-text { font-size: 1.02rem; color: #445566; line-height: 1.75; }
.project-modal-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e0ddd6; cursor: pointer; font-size: 1.3rem; line-height: 1; color: #0D1B2A; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.project-modal-close:hover { background: #0D1B2A; color: #fff; border-color: #0D1B2A; }

/* KOOPERATIONSPARTNER */
.partners-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem 3.5rem; }
.partner-item { width: 280px; max-width: 100%; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.partner-item img { transition: opacity 0.2s; }
.partner-item p { transition: color 0.2s; }
.partner-item:hover img { opacity: 0.8; }
.partner-item:hover p { color: #0D1B2A; }
.partner-logo { height: 96px; display: flex; align-items: center; margin-bottom: 1rem; }
.partner-logo img { width: 100%; max-height: 96px; object-fit: contain; object-position: left center; }
.partner-item p { font-size: 0.98rem; color: #556677; line-height: 1.65; }

.contact-wrap-bg { background: #0D1B2A; }
.contact-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
@media (max-width: 640px) { .contact-wrap { grid-template-columns: 1fr; gap: 2.5rem; } }
.contact-info h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; color: #fff; margin-bottom: 1rem; line-height: 1.2; }
.contact-info > p { color: #7D8FA3; margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.8; }
.contact-detail { font-size: 0.85rem; color: #7D8FA3; margin-bottom: 1rem; }
.contact-detail strong { display: block; color: #C9A84C; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.2rem; }
.contact-detail a { color: #7D8FA3; text-decoration: none; }
.contact-detail a:hover { color: #C9A84C; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7D8FA3; margin-bottom: 0.4rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; border: 1px solid #1e3048; background: #0a1520; padding: 0.8rem 1rem; font-family: "DM Sans", sans-serif; font-size: 1rem; color: #fff; outline: none; border-radius: 0; transition: border-color 0.2s; -webkit-appearance: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: #5A7088; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #C9A84C; }
.form-group select option { background: #0D1B2A; }
.form-group textarea { height: 120px; resize: vertical; }
.form-success { display: none; background: #0a1f10; border: 1px solid #2a5a3a; padding: 1rem 1.25rem; color: #6abf8a; font-size: 0.9rem; margin-top: 1rem; }

footer { background: #060e16; color: #6B8199; text-align: center; padding: 2rem 1.5rem; font-size: 0.78rem; letter-spacing: 0.05em; }
footer a { color: #7D8FA3; text-decoration: none; margin: 0 0.75rem; transition: color 0.2s; }
footer a:hover { color: #C9A84C; }
@media (max-width: 640px) {
  .hero-inner { grid-template-columns: 1fr !important; }
  .hero-logo { display: none !important; }
}