:root {
    --navy: #121c2b;
    --navy-light: #1c2a3f;
    --cream: #f7f4ee;
    --cream-2: #efeae0;
    --gold: #a9834f;
    --gold-light: #c9a876;
    --ink: #1a1a1a;
    --grey: #5a5a5a;
    --line: rgba(255,255,255,0.14);
    --line-dark: #e6e1d6;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--cream);
    color: var(--ink);
  }
  a { color: inherit; }
  .wrap { max-width: 1200px; margin:0 auto; padding-left:40px; padding-right:40px; }
  h1,h2,h3,h4 { font-family:'Cormorant Garamond', serif; font-weight:600; }

  /* ---------- HEADER ---------- */
  header { background: var(--navy); color:#fff; position:sticky; top:0; z-index:50; }
  .topbar {
    display:flex; justify-content:space-between; align-items:center;
    max-width: 1200px; margin:0 auto; padding: 12px 40px;
    font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5);
    border-bottom: 1px solid var(--line);
  }
  .topbar a { text-decoration:none; margin-left:22px; color: rgba(255,255,255,0.5); }
  .topbar a.active { color: var(--gold-light); }
  nav.mainnav {
    max-width: 1200px; margin:0 auto; padding: 20px 40px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .logo { font-family:'Cormorant Garamond', serif; font-size: 27px; letter-spacing: 0.28em; font-weight:600; color:#fff; line-height:1; text-decoration:none; display:inline-block; }
  .navlinks { display:flex; gap: 32px; list-style:none; }
  .navlinks a { text-decoration:none; font-size: 13.5px; color: rgba(255,255,255,0.85); }
  .navlinks a:hover { color: var(--gold-light); }
  .cta-btn { border: 1px solid var(--gold-light); color: var(--gold-light); padding: 9px 24px; font-size:12px; letter-spacing:0.08em; text-decoration:none; text-transform:uppercase; transition:.25s; white-space:nowrap; }
  .cta-btn:hover { background: var(--gold-light); color: var(--navy); }

  /* ---------- HERO ---------- */
  .hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 55%, #223249 100%); color:#fff; padding: 100px 40px 0; position:relative; overflow:hidden; }
  .hero::after { content:""; position:absolute; right:-10%; top:-20%; width:600px; height:600px; border: 1px solid var(--line); border-radius:50%; }
  .hero::before { content:""; position:absolute; right:5%; top:10%; width:420px; height:420px; border: 1px solid var(--line); border-radius:50%; }
  .hero-inner { max-width: 1200px; margin:0 auto; position:relative; z-index:2; padding-bottom:120px; }
  .eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform:uppercase; color: var(--gold-light); margin-bottom: 24px; font-weight:500; }
  .hero h1 { font-size: 54px; line-height:1.16; font-weight:500; max-width: 720px; }
  .hero h1 em { font-style:italic; color: var(--gold-light); }
  .hero p.lead { font-weight:300; font-size:17px; line-height:1.7; max-width:520px; color: rgba(255,255,255,0.72); margin-top:24px; }
  .hero-ctas { margin-top:40px; display:flex; gap:20px; align-items:center; }
  .btn-primary { background: var(--gold-light); color: var(--navy); text-decoration:none; padding: 15px 32px; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; display:inline-block; }
  .btn-ghost { text-decoration:none; font-size:13px; letter-spacing:0.05em; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom:3px; }

  /* ---------- PILLARS STRIP ---------- */
  .pillars { max-width:1200px; margin: -64px auto 0; position:relative; z-index:3; background:#fff; display:grid; grid-template-columns: repeat(3,1fr); box-shadow: 0 30px 60px -20px rgba(18,28,43,0.25); }
  .pillar { padding: 34px 38px; border-right: 1px solid var(--line-dark); }
  .pillar:last-child { border-right:none; }
  .pillar .num { font-family:'Cormorant Garamond', serif; color: var(--gold); font-size:14px; letter-spacing:0.1em; margin-bottom:12px; display:block; }
  .pillar h3 { font-size:20px; color: var(--navy); margin-bottom:9px; }
  .pillar p { font-size:13.5px; line-height:1.6; color: var(--grey); font-weight:300; }

  section { padding: 100px 0; }
  .section-head { max-width: 640px; margin-bottom: 60px; }
  .section-eyebrow { font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color: var(--gold); font-weight:600; margin-bottom:16px; }
  .section-head h2 { font-size: 38px; line-height:1.25; color: var(--navy); font-weight:600; }
  .section-head h2 em { font-style:italic; color: var(--gold); }

  /* ---------- ABOUT ---------- */
  .about { background:#fff; }
  .about-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items:start; }
  .about p { font-size:15.5px; line-height:1.85; color:#3a3a3a; font-weight:300; margin-bottom:18px; }
  .about strong { font-weight:600; color: var(--navy); }
  .about-quote { border-left: 2px solid var(--gold); padding-left:28px; margin-top:10px; }
  .about-quote p { font-family:'Cormorant Garamond', serif; font-style:italic; font-size:21px; color: var(--navy); line-height:1.5; font-weight:500; }

  /* ---------- DIFFERENTIATORS ---------- */
  .differentiators { background: var(--cream-2); }
  .diff-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
  .diff-card { background:#fff; padding: 42px 38px; }
  .diff-card .bar { width:32px; height:2px; background: var(--gold); margin-bottom:22px; }
  .diff-card h3 { font-size:19px; color: var(--navy); margin-bottom:10px; }
  .diff-card p { font-size:13.5px; line-height:1.65; color: var(--grey); font-weight:300; }

  /* ---------- TEAM ---------- */
  .team { background:#fff; }
  .team-grid { display:grid; grid-template-columns: repeat(2, 1fr); column-gap:60px; border-top:1px solid var(--line-dark); }
  .member { padding: 40px 10px 40px 0; border-bottom:1px solid var(--line-dark); }
  .member-top { display:flex; align-items:center; gap:18px; margin-bottom: 4px; }
  .member-photo { width:72px; height:72px; border-radius:50%; object-fit:cover; border: 2px solid var(--gold-light); flex-shrink:0; }
  .member-head { display:flex; flex-direction:column; gap:4px; }
  .member h3 { font-size:22px; color: var(--navy); }
  .member .role { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); font-weight:600; }
  .member ul { margin-top:14px; padding-left:18px; }
  .member li { font-size:13.5px; line-height:1.65; color: var(--grey); font-weight:300; margin-bottom:6px; }
  .member .contact-link { display:inline-block; margin-top:16px; font-size:12.5px; letter-spacing:0.05em; color: var(--navy); border-bottom:1px solid var(--gold); padding-bottom:2px; text-decoration:none; }

  /* ---------- SERVICES ---------- */
  .services { background: var(--navy); color:#fff; }
  .services .section-head h2 { color:#fff; }
  .services .section-eyebrow { color: var(--gold-light); }
  .service-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 70px; }
  .service-card { background: var(--navy-light); padding: 36px 32px; }
  .service-card h3 { font-size:21px; margin-bottom:12px; }
  .service-card p { font-size:13.5px; font-weight:300; color: rgba(255,255,255,0.68); line-height:1.65; margin-bottom:18px; }
  .service-card a { font-size:12px; letter-spacing:0.07em; text-transform:uppercase; color: var(--gold-light); text-decoration:none; border-bottom:1px solid var(--gold-light); padding-bottom:3px; }
  .service-card { display:flex; flex-direction:column; }
  .service-card p { flex:1; }
  .service-card a { margin-top:auto; align-self:flex-start; }
  blockquote { max-width:760px; margin:0 auto; text-align:center; font-family:'Cormorant Garamond', serif; font-style:italic; font-size: 24px; line-height:1.55; color: rgba(255,255,255,0.88); font-weight:500; }
  blockquote cite { display:block; margin-top:22px; font-family:'Inter'; font-style:normal; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold-light); }

  /* ---------- LEITBILD ---------- */
  .leitbild { background: var(--cream-2); }
  .leitbild-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 50px 60px; }
  .leitbild-item { background:#fff; padding: 36px 38px; border-top: 2px solid var(--gold); }
  .leitbild-item h3 { font-size:21px; color: var(--navy); margin-bottom:14px; }
  .leitbild-item p { font-size:14px; line-height:1.75; color: var(--grey); font-weight:300; }

  /* ---------- IMMOBILIEN ---------- */
  .immobilien { background:#fff; }

  /* ---------- BLOG ---------- */
  .blog { background: var(--cream-2); }
  .blog-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 34px; }
  .blog-card { background:#fff; border: 1px solid var(--line-dark); text-decoration:none; color:inherit; display:flex; flex-direction:column; }
  .blog-img { width:100%; height:170px; object-fit:cover; display:block; filter: saturate(0.85); }
  .blog-body { padding: 22px 24px 26px; flex:1; display:flex; flex-direction:column; }
  .blog-title { font-family:'Cormorant Garamond', serif; font-size:19px; font-weight:600; color: var(--navy); line-height:1.35; margin-bottom:12px; }
  .blog-excerpt { font-size:12.5px; line-height:1.6; color: var(--grey); font-weight:300; flex:1; margin-bottom:16px; }
  .blog-more { font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; color: var(--gold); }
  .blog-cta { text-align:center; margin-top:50px; }
  .blog-cta a { font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase; color: var(--navy); border-bottom:1px solid var(--gold); padding-bottom:3px; text-decoration:none; }
  .prop-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; }
  .prop-card { border: 1px solid var(--line-dark); }
  .prop-img { width:100%; height:170px; object-fit:cover; display:block; filter: saturate(0.85); }
  .prop-body { padding: 20px 22px 24px; }
  .prop-status { display:inline-block; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; margin-bottom:12px; font-weight:600; }
  .prop-status.sold { background: var(--line-dark); color: var(--grey); }
  .prop-status.sale { background: var(--gold); color:#fff; }
  .prop-price { float:right; font-size:13px; color: var(--navy); font-weight:600; }
  .prop-title { font-size:16px; color: var(--navy); line-height:1.4; margin-bottom:14px; min-height:44px; }
  .prop-specs { display:flex; gap:16px; font-size:12px; color: var(--grey); border-top:1px solid var(--line-dark); padding-top:12px; }
  .prop-specs b { color: var(--navy); font-weight:600; }
  .prop-cta { text-align:center; margin-top:50px; }
  .prop-cta a { font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase; color: var(--navy); border-bottom:1px solid var(--gold); padding-bottom:3px; text-decoration:none; }

  /* ---------- CONTACT ---------- */
  .contact { background: var(--cream); }
  .contact-grid { display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; }
  .contact-info h3 { font-size:28px; color: var(--navy); margin-bottom:22px; }
  .map { filter: grayscale(0.4) contrast(1.05); border: 1px solid var(--line-dark); }
  .contact-info p { font-size:14.5px; line-height:2; color:#3a3a3a; font-weight:300; }
  .contact-info .addr { margin-bottom: 26px; }
  form { display:grid; gap:18px; }
  .form-row { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  label { display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--grey); margin-bottom:8px; }
  input, textarea {
    width:100%; border:none; border-bottom: 1px solid #c9c2b2; background:transparent;
    padding: 10px 2px; font-family:'Inter'; font-size:14.5px; color: var(--ink); outline:none;
  }
  input:focus, textarea:focus { border-bottom-color: var(--gold); }
  textarea { resize:vertical; min-height: 90px; }
  .submit-btn { justify-self:start; background: var(--navy); color:#fff; border:none; padding:11px 26px; font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; cursor:pointer; margin-top:8px; }
  .submit-btn:hover { background: var(--gold); }

  /* ---------- FOOTER ---------- */
  footer { background: var(--navy); color: rgba(255,255,255,0.55); padding: 36px 0; }
  .footer-row { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; flex-wrap:wrap; gap:12px; }
  .footer-row a { text-decoration:none; color: rgba(255,255,255,0.55); margin-left:24px; }
  .footer-row a:hover { color: var(--gold-light); }

  @media (max-width: 900px) {
    .navlinks { display:none; }
    .about-grid, .contact-grid, .team-grid { grid-template-columns: 1fr; }
    .pillars, .diff-grid, .service-grid, .leitbild-grid { grid-template-columns: 1fr; }
    .pillar, .diff-card { border-right:none; border-bottom:1px solid var(--line-dark); }
    .service-card { border-bottom: 1px solid var(--line); }
    .service-grid .service-card:last-child { grid-column: 1; }
    .prop-grid, .blog-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 38px; }
  }
  @media (max-width: 600px) {
    .wrap { padding-left:22px; padding-right:22px; }
    .hero { padding-left:0; padding-right:0; }
    .hero-inner, .topbar, nav.mainnav { padding-left:22px; padding-right:22px; }
    .hero h1 { font-size: 30px; }
    .pillar, .diff-card, .service-card { padding-left:24px; padding-right:24px; }
    .member-top { flex-wrap:wrap; }
    .form-row { grid-template-columns: 1fr; }
  }

  /* ---------- ARTIKEL (Blogbeitrag) — baut nur auf den Tokens oben auf ---------- */
  .article-head { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 55%, #223249 100%); color:#fff; padding: 76px 0 66px; position:relative; overflow:hidden; }
  .article-head::after { content:""; position:absolute; right:-10%; top:-40%; width:600px; height:600px; border: 1px solid var(--line); border-radius:50%; }
  .article-head::before { content:""; position:absolute; right:5%; top:-10%; width:420px; height:420px; border: 1px solid var(--line); border-radius:50%; }
  .article-head .wrap { position:relative; z-index:2; }
  .article-head h1 { font-size: 42px; line-height:1.2; font-weight:500; max-width: 860px; }
  .article-head h1 em { font-style:italic; color: var(--gold-light); }
  .article-meta { margin-top: 24px; font-size: 12px; letter-spacing: 0.1em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
  .article-meta span { margin-right: 10px; }
  .article-meta span + span::before { content: "· "; margin-right: 10px; }

  .article { background:#fff; padding: 64px 0 90px; }
  .article-body { max-width: 780px; margin: 0 auto; }
  .article-hero-img { width:100%; height:auto; display:block; margin-bottom: 44px; filter: saturate(0.85); }
  .article-body p { font-size: 16px; line-height: 1.85; color:#3a3a3a; font-weight:300; margin-bottom: 20px; }
  .article-body h2 { font-size: 27px; color: var(--navy); line-height:1.3; margin: 46px 0 16px; }
  .article-body h3 { font-size: 22px; color: var(--navy); line-height:1.35; margin: 34px 0 14px; }
  .article-body ul, .article-body ol { margin: 0 0 22px 20px; }
  .article-body li { font-size: 15.5px; line-height: 1.8; color:#3a3a3a; font-weight:300; margin-bottom: 8px; }
  .article-body strong { font-weight:600; color: var(--navy); }
  .article-body em { font-style:italic; }
  .article-body a { color: var(--gold); }
  .article-body blockquote { border-left: 2px solid var(--gold); padding-left: 28px; margin: 32px 0; font-family:'Cormorant Garamond', serif; font-style:italic; font-size: 21px; line-height:1.5; color: var(--navy); font-weight:500; }
  .article-img { width:100%; height:auto; display:block; margin: 34px 0; filter: saturate(0.85); }

  .article-signoff { margin-top: 56px; border-top: 1px solid var(--line-dark); padding-top: 34px; display:flex; gap: 28px; align-items:flex-start; }
  .article-signoff img { width: 98px; height: 104px; object-fit:cover; border: 1px solid var(--line-dark); flex-shrink:0; }
  .article-signoff .signoff-text p { font-size: 14px; line-height: 1.75; color: var(--grey); font-weight:300; margin: 0 0 4px; }
  .article-signoff .signoff-text p.intro { margin-bottom: 16px; }
  .article-signoff .signoff-text .name { font-family:'Cormorant Garamond', serif; font-size: 20px; font-weight:600; color: var(--navy); }
  .article-signoff .signoff-text a { color: var(--navy); border-bottom: 1px solid var(--gold); text-decoration:none; }

  .article-back { max-width: 780px; margin: 46px auto 0; }
  .article-back a { font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase; color: var(--navy); border-bottom:1px solid var(--gold); padding-bottom:3px; text-decoration:none; }

  /* Blogkarte ohne Titelbild — haelt das Raster trotzdem auf gleicher Hoehe */
  .blog-img-none { height:170px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); display:flex; align-items:center; justify-content:center; }
  .blog-img-none span { font-family:'Cormorant Garamond', serif; font-size:21px; letter-spacing:0.22em; color: rgba(255,255,255,0.45); }

  @media (max-width: 900px) {
    .article-head h1 { font-size: 31px; }
    .article-signoff { flex-direction: column; gap: 20px; }
  }
  @media (max-width: 600px) {
    .article-head { padding: 54px 0 48px; }
    .article-head h1 { font-size: 25px; }
    .article { padding: 44px 0 64px; }
    .article-body p { font-size: 15px; }
    .article-body h2 { font-size: 23px; margin-top: 36px; }
  }


  /* ---------- RECHTLICHES (Impressum & Datenschutz) ---------- */
  .legal { background:#fff; padding: 64px 0 90px; }
  .legal-body { max-width: 780px; margin: 0 auto; }
  .legal-body h2 { font-size: 27px; color: var(--navy); line-height:1.3; margin: 52px 0 18px; }
  .legal-body h2:first-child { margin-top: 0; }
  .legal-body h3 { font-size: 19px; color: var(--navy); line-height:1.35; margin: 32px 0 12px; }
  .legal-body p { font-size: 15.5px; line-height: 1.85; color:#3a3a3a; font-weight:300; margin-bottom: 18px; }
  .legal-body p.tight { margin-bottom: 2px; }
  .legal-body p.tight + p:not(.tight) { margin-top: 18px; }
  .legal-body strong { font-weight:600; color: var(--navy); }
  .legal-body a { color: var(--gold); word-break: break-word; }
  /* Claim im Seitenkopf — Schreibweise bleibt wie im Original, also kein
     text-transform wie sonst in .article-meta. */
  .article-meta .legal-claim { text-transform: none; font-size: 13px; letter-spacing: 0.06em; }
  @media (max-width: 600px) {
    .legal { padding: 44px 0 64px; }
    .legal-body h2 { font-size: 23px; margin-top: 40px; }
    .legal-body p { font-size: 15px; }
  }