*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --black: #0e0e0c;
      --white: #fafaf7;
      --stone: #f4f3ee;
      --muted: #8a8880;
      --accent: #c8b89a;
      --accent-dark: #9a8570;
      --border: #e4e2da;
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;
      --nav-h: 72px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      background: var(--white);
      color: var(--black);
      font-size: 16px;
      line-height: 1.7;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: var(--nav-h);
      background: rgba(250, 250, 247, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 6vw;
    }
    .nav-logo {
      font-family: var(--serif);
      font-size: 1.25rem;
      font-weight: 300;
      letter-spacing: 0.04em;
      color: var(--black);
      text-decoration: none;
      text-align: center;
      #flex-shrink: 0;
    }
    .nav-links { 
      display: flex; 
      gap: 2rem; 
      list-style: none;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      padding-right: 1rem;
    }
    .nav-links::-webkit-scrollbar {
      display: none;
    }
    .nav-links { -ms-overflow-style: none; scrollbar-width: none; }
    .nav-links a {
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .nav-links a:hover { color: var(--black); }

    /* ── SECTIONS ── */
    section { padding: 6rem 6vw; }
    section:first-of-type { padding-top: calc(var(--nav-h) + 5rem); }

    /* ── HERO ── */
    #hero {
      min-height: 50svh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      padding-top: calc(var(--nav-h) + 4rem);
    }
    .hero-text {}
    .hero-eyebrow {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent-dark);
      margin-bottom: 1.5rem;
      font-weight: 400;
    }
    .hero-title {
      font-family: var(--serif);
      font-size: clamp(2.8rem, 5vw, 4.2rem);
      font-weight: 300;
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 1.5rem;
    }
    .hero-title em { font-style: italic; color: var(--accent-dark); }
    .hero-sub {
      font-size: 1rem;
      color: var(--muted);
      font-weight: 300;
      max-width: 40ch;
      margin-bottom: 2.5rem;
      line-height: 1.8;
    }
    .btn-primary {
      display: inline-block;
      padding: 0.875rem 2rem;
      background: var(--black);
      color: var(--white);
      font-family: var(--sans);
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid var(--black);
      transition: background 0.25s, color 0.25s;
      margin-right: 1rem;
    }
    .btn-primary:hover { background: transparent; color: var(--black); }
    .btn-ghost {
      display: inline-block;
      padding: 0.875rem 2rem;
      background: transparent;
      color: var(--black);
      font-family: var(--sans);
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid var(--black);
      transition: background 0.25s, color 0.25s;
      margin-top: 1rem;
    }
    .btn-ghost:hover { background: var(--black); color: var(--white); }
    .hero-image {
      position: relative;
      height: 560px;
      background: var(--stone);
      overflow: hidden;
    }
    .hero-image::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #e8e4db 0%, #d4cfc4 100%);
    }
    .hero-image-label {
      position: absolute;
      bottom: 2rem; left: 2rem;
      font-family: var(--serif);
      font-size: 0.9rem;
      font-style: italic;
      color: var(--accent-dark);
    }
    .hero-stat {
      position: absolute;
      top: 2rem; right: 2rem;
      text-align: right;
    }
    .hero-stat-num {
      font-family: var(--serif);
      font-size: 3rem;
      font-weight: 300;
      line-height: 1;
      color: var(--black);
    }
    .hero-stat-label {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ── DIVIDER ── */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 0 6vw;
    }

    /* ── ÜBER MICH ── */
    #ueber-mich {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 5rem;
      align-items: start;
    }
    .section-label {
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent-dark);
      padding-top: 0.5rem;
      font-weight: 400;
    }
    .section-title {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 300;
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }
    .section-title em { font-style: italic; }
    .about-body p {
      color: #4a4944;
      font-weight: 300;
      margin-bottom: 1.2rem;
      font-size: 1.0rem;
    }
    .about-credentials {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 2.5rem;
    }
    .credential {
      padding: 1.25rem;
      border: 1px solid var(--border);
      background: var(--stone);
    }
    .credential-title {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent-dark);
      margin-bottom: 0.4rem;
      font-weight: 400;
    }
    .credential-text {
      font-family: var(--serif);
      font-size: 1rem;
      color: var(--black);
      font-weight: 400;
    }

    /* ── ANGEBOTE ── */
    #angebote { background: var(--stone); }
    .angebote-header { margin-bottom: 3.5rem; }
    .angebote-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      background: var(--border);
    }
    .angebot-card {
      background: var(--white);
      padding: 2.5rem 2rem;
      display: flex;
      flex-direction: column;
    }
    .angebot-num {
      font-family: var(--serif);
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 1.5rem;
    }
    .angebot-title {
      font-family: var(--serif);
      font-size: 1.4rem;
      font-weight: 400;
      margin-bottom: 0.75rem;
      line-height: 1.2;
    }
    .angebot-desc {
      font-size: 0.9rem;
      color: var(--muted);
      font-weight: 300;
      line-height: 1.8;
      flex: 1;
      margin-bottom: 1.5rem;
    }
    .angebot-link {
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--black);
      text-decoration: none;
      border-bottom: 1px solid var(--black);
      padding-bottom: 2px;
      align-self: flex-start;
      transition: color 0.2s, border-color 0.2s;
    }
    .angebot-link:hover { color: var(--accent-dark); border-color: var(--accent-dark); }

    /* ── TESTIMONIALS ── */
    #testimonials {}
    .testi-header { margin-bottom: 3.5rem; }
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    .testi-card {
      padding: 2.5rem;
      border: 1px solid var(--border);
    }
    .testi-quote {
      font-family: var(--serif);
      font-size: 1.15rem;
      font-weight: 300;
      font-style: italic;
      line-height: 1.7;
      color: #2a2a28;
      margin-bottom: 1.5rem;
    }
    .testi-author {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 400;
    }
    .testi-author span {
      display: block;
      color: var(--accent-dark);
      margin-top: 0.2rem;
    }

    /* ── KONTAKT ── */
    #kontakt { background: var(--black); color: var(--white); }
    #kontakt .section-label { color: var(--accent); }
    #kontakt .section-title { color: var(--white); }
    .kontakt-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    .kontakt-text p {
      color: #a09e98;
      font-weight: 300;
      margin-bottom: 1rem;
    }
    .kontakt-info { margin-top: 2rem; }
    .kontakt-info-item {
      display: flex;
      gap: 1rem;
      align-items: baseline;
      margin-bottom: 1rem;
      font-size: 0.9rem;
    }
    .kontakt-info-label {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      white-space: nowrap;
      font-weight: 400;
      min-width: 6rem;
    }
    .kontakt-info-val { color: #d0cec8; }
    .kontakt-form {}
    .form-row { margin-bottom: 1.25rem; }
    .form-label {
      display: block;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.5rem;
      font-weight: 400;
    }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--white);
      padding: 0.75rem 1rem;
      font-family: var(--sans);
      font-size: 0.9rem;
      font-weight: 300;
      outline: none;
      transition: border-color 0.2s;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--accent);
    }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.3); }
    .form-select option { background: #1a1a18; color: var(--white); }
    .form-textarea { resize: vertical; min-height: 120px; }
    .btn-submit {
      width: 100%;
      padding: 1rem;
      background: var(--accent);
      color: var(--black);
      border: none;
      font-family: var(--sans);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s;
      margin-top: 0.5rem;
    }
    .btn-submit:hover { background: #b8a88a; }

    /* ── FOOTER ── */
    footer {
      padding: 2rem 6vw;
      border-top: 1px solid rgba(255,255,255,0.1);
      background: var(--black);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.3);
    }
    footer a { color: inherit; text-decoration: none; }
    footer a:hover { color: var(--accent); }

    /* ── PAGE NAVIGATION (multi-page feel) ── */
    .page { display: none; }
    .page.active { display: block; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.7s ease both; }
    .fade-up-2 { animation: fadeUp 0.7s 0.15s ease both; }
    .fade-up-3 { animation: fadeUp 0.7s 0.3s ease both; }
    .fade-up-4 { animation: fadeUp 0.7s 0.45s ease both; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      #hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-image { height: 320px; order: -1; }
      #ueber-mich { grid-template-columns: 1fr; gap: 2rem; }
      .angebote-grid { grid-template-columns: 1fr; gap: 1px; }
      .testi-grid { grid-template-columns: 1fr; }
      .kontakt-inner { grid-template-columns: 1fr; gap: 3rem; }
      .about-credentials { grid-template-columns: 1fr; }
    /* ── PAGES: IMPRESSUM & DATENSCHUTZ ── */
       main {
         max-width: 680px;
         margin: 0 auto;
         padding: calc(var(--nav-h) + 5rem) 6vw 6rem;
       }
       
       .eyebrow {
         font-size: 0.75rem;
         letter-spacing: 0.15em;
         text-transform: uppercase;
         color: var(--accent-dark);
         margin-bottom: 1rem;
         font-weight: 400;
       }
       
       main h1 {
         font-family: var(--serif);
         font-size: 2.8rem;
         font-weight: 300;
         line-height: 1.15;
         margin-bottom: 3rem;
       }
       
       main h2 {
         font-family: var(--serif);
         font-size: 1.4rem;
         font-weight: 400;
         margin-top: 2.5rem;
         margin-bottom: 0.75rem;
         color: var(--black);
       }
       
       main h3 {
         font-family: var(--sans);
         font-size: 0.9rem;
         font-weight: 500;
         letter-spacing: 0.05em;
         text-transform: uppercase;
         color: var(--accent-dark);
         margin-top: 1.5rem;
         margin-bottom: 0.5rem;
       }
       
       main p {
         color: #4a4944;
         font-weight: 300;
         margin-bottom: 0.75rem;
       }
       
       main ul {
         color: #4a4944;
         font-weight: 300;
         margin: 0.5rem 0 0.75rem 1.5rem;
       }
       
       main ul li { 
         margin-bottom: 0.3rem; 
       }
       
       main a {
         color: var(--accent-dark);
         text-decoration: none;
         border-bottom: 1px solid var(--border);
       }
       
       main a:hover { 
         border-color: var(--accent-dark); 
       }
       
       main .divider { 
         height: 1px;
         background: var(--border);
         margin: 2.5rem 0;
       }
       
       .info-box {
         background: var(--stone);
         border-left: 3px solid var(--accent-dark);
         padding: 1rem 1.25rem;
         margin: 1.5rem 0;
         font-size: 0.9rem;
         color: var(--muted);
         font-weight: 300;
       }
    }