:root{
    --bg: #EAE1D2;
    --bg-alt: #F6F1E6;
    --card: #FFFDF8;
    --ink: #2A2620;
    --ink-soft: #5B5348;
    --gold: #AD8047;
    --gold-deep: #8C6733;
    --gold-light: #DCC7A0;
    --line: rgba(42,38,32,0.12);
    --max: 1180px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }

  h1,h2,h3{
    font-family:'Cinzel', serif;
    font-weight:500;
    color:var(--ink);
    margin:0;
    letter-spacing:0.04em;
  }

  .script{
    font-family:'Alex Brush', cursive;
    font-weight:400;
  }

  .eyebrow{
    font-family:'Jost', sans-serif;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.35em;
    font-size:0.72rem;
    color:var(--gold-deep);
    display:inline-flex;
    align-items:center;
    gap:0.9em;
  }
  .eyebrow::before{
    content:"";
    width:28px; height:1px;
    background:var(--gold);
    display:inline-block;
  }

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 6vw;
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    background:rgba(234,225,210,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:background 0.3s ease;
  }
  .nav{
    max-width:var(--max);
    margin:0 auto;
    padding:0.9rem 6vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .nav-mark{
    display:flex;
    align-items:baseline;
    gap:0.5rem;
    font-family:'Cinzel', serif;
    letter-spacing:0.12em;
    font-size:0.95rem;
  }
  .nav-mark .script{
    font-size:1.9rem;
    color:var(--gold-deep);
    line-height:0.6;
  }
  .nav-links{
    display:flex;
    gap:2.4rem;
    list-style:none;
    margin:0; padding:0;
    font-size:0.82rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .nav-links a{
    position:relative;
    padding-bottom:4px;
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.35s ease;
  }
  .nav-links a:hover::after{ transform:scaleX(1); }
  .nav-toggle{ display:none; background:none; border:0; font-size:1.6rem; color:var(--ink); cursor:pointer; }

  @media (max-width:860px){
    .nav-links{
      position:fixed; top:64px; left:0; right:0;
      background:var(--bg-alt);
      flex-direction:column;
      align-items:center;
      gap:1.6rem;
      padding:2.2rem 0 2.6rem;
      transform:translateY(-140%);
      transition:transform 0.4s ease;
      border-bottom:1px solid var(--line);
    }
    .nav-links.open{ transform:translateY(0); }
    .nav-toggle{ display:block; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:9.5rem 0 6rem;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:4vw;
    align-items:center;
  }
  .hero-arc{
    position:absolute;
    top:-12vw; right:-14vw;
    width:52vw; height:52vw;
    border:1px solid var(--gold-light);
    border-radius:50%;
    opacity:0.6;
  }
  .hero-eyebrow{ margin-bottom:1.4rem; }
  .hero h1{
    font-size:clamp(2.1rem, 4.6vw, 3.6rem);
    line-height:1.18;
  }
  .hero h1 span{ color:var(--gold-deep); }
  .hero-tagline{
    margin-top:1.3rem;
    font-family:'Jost';
    font-weight:400;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-size:0.82rem;
    color:var(--ink-soft);
  }
  .hero-tagline b{ color:var(--gold-deep); font-weight:500; }
  .hero-copy{
    margin-top:1.6rem;
    max-width:44ch;
    color:var(--ink-soft);
    font-size:1.05rem;
  }
  .hero-actions{
    margin-top:2.4rem;
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-block;
    padding:0.95rem 1.9rem;
    font-size:0.8rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    border:1px solid var(--ink);
    transition:all 0.3s ease;
  }
  .btn-solid{ background:var(--ink); color:var(--bg-alt); }
  .btn-solid:hover{ background:transparent; color:var(--ink); }
  .btn-outline:hover{ background:var(--ink); color:var(--bg-alt); }

  .hero-media{
    position:relative;
    justify-self:center;
    width:min(90%, 420px);
  }
  .ring-frame{
    position:relative;
    aspect-ratio:1/1;
  }
  .ring-frame img{
    width:88%; height:88%;
    object-fit:cover;
    border-radius:50%;
    position:absolute;
    top:6%; left:6%;
    box-shadow:0 30px 60px -20px rgba(42,38,32,0.35);
  }
  .ring-frame::before{
    content:"";
    position:absolute; inset:0;
    border:1px solid var(--gold);
    border-radius:50%;
    animation:draw 1.6s ease forwards;
  }
  @keyframes draw{
    from{ opacity:0; transform:scale(0.85); }
    to{ opacity:1; transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .ring-frame::before{ animation:none; opacity:1; }
  }

  @media (max-width:860px){
    .hero .wrap{ grid-template-columns:1fr; text-align:center; }
    .hero-copy{ margin-left:auto; margin-right:auto; }
    .hero-actions{ justify-content:center; }
    .hero-media{ order:-1; width:70%; margin-bottom:1rem; }
    .eyebrow{ justify-content:center; }
  }

  /* ---------- section divider (broken arc, echoes logo) ---------- */
  .divider{
    display:flex;
    justify-content:center;
    padding:0 0 0.5rem;
  }
  .divider svg{ opacity:0.55; }

  section{ padding:5.5rem 0; position:relative; }
  .alt{ background:var(--bg-alt); }

  /* ---------- philosophie ---------- */
  .split{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:5vw;
    align-items:center;
  }
  .split.rev{ grid-template-columns:1.15fr 0.85fr; }
  .split.rev .split-media{ order:2; }
  .split-media .ring-frame{ aspect-ratio:4/5; }
  .split-media .ring-frame img{
    border-radius:46% 54% 52% 48% / 52% 46% 54% 48%;
    width:94%; height:94%; top:3%; left:3%;
  }
  .split-media .ring-frame::before{
    border-radius:46% 54% 52% 48% / 52% 46% 54% 48%;
  }
  .split h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin:1rem 0 1.4rem; }
  .split p{ color:var(--ink-soft); margin:0 0 1.1rem; }
  .split p:last-child{ margin-bottom:0; }
  .signature-line{
    margin-top:1.8rem;
    font-family:'Alex Brush', cursive;
    font-size:2rem;
    color:var(--gold-deep);
  }

  @media (max-width:860px){
    .split, .split.rev{ grid-template-columns:1fr; text-align:center; }
    .split.rev .split-media{ order:0; }
    .split-media{ width:65%; margin:0 auto 1.5rem; }
  }

  /* ---------- pillars ---------- */
  .pillars{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2.4rem;
    margin-top:3.2rem;
    text-align:center;
  }
  .pillar{ padding:0 1rem; }
  .pillar-mark{
    width:56px; height:56px;
    margin:0 auto 1.1rem;
    border:1px solid var(--gold);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep);
    font-family:'Cinzel';
    font-size:0.95rem;
  }
  .pillar h3{
    font-size:0.95rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    margin-bottom:0.6rem;
  }
  .pillar p{ color:var(--ink-soft); font-size:0.95rem; margin:0; }
  @media (max-width:760px){
    .pillars{ grid-template-columns:1fr; gap:2.2rem; }
  }

  /* ---------- leistungen ---------- */
  .section-head{ text-align:center; max-width:640px; margin:0 auto 3.4rem; }
  .section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin:0.9rem 0 1.2rem; }
  .section-head p{ color:var(--ink-soft); }

  .services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
    margin-bottom:3rem;
  }
  .service-card{
    background:var(--card);
    border:1px solid var(--line);
    padding:2.6rem 1.8rem;
    text-align:center;
    position:relative;
  }
  .service-card .num{
    font-family:'Alex Brush';
    font-size:2.4rem;
    color:var(--gold-light);
    display:block;
    margin-bottom:0.4rem;
  }
  .service-card h3{
    font-family:'Cinzel'; font-size:1.05rem;
    letter-spacing:0.1em; text-transform:uppercase;
    margin-bottom:0.7rem;
  }
  .service-card p{ color:var(--ink-soft); font-size:0.92rem; margin:0; }
  @media (max-width:760px){ .services{ grid-template-columns:1fr; } }

  .service-extra{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4vw;
    align-items:center;
  }
  .service-extra .ring-frame{ aspect-ratio:5/4; }
  .service-extra .ring-frame img{
    border-radius:6px; width:100%; height:100%; top:0; left:0;
  }
  .service-extra .ring-frame::before{
    border-radius:6px;
    inset:14px;
    border-color:var(--gold);
  }
  .checklist{ list-style:none; margin:1.4rem 0 0; padding:0; }
  .checklist li{
    padding:0.55rem 0;
    border-bottom:1px solid var(--line);
    color:var(--ink-soft);
    display:flex; gap:0.8rem; align-items:baseline;
  }
  .checklist li::before{
    content:"–";
    color:var(--gold-deep);
  }
  @media (max-width:860px){
    .service-extra{ grid-template-columns:1fr; text-align:center; }
    .service-extra .ring-frame{ width:70%; margin:0 auto; }
    .checklist li{ justify-content:center; }
  }

  /* ---------- preise ---------- */
  .price-table{
    width:100%;
    border-collapse:collapse;
    background:var(--card);
    border:1px solid var(--line);
    max-width:640px;
    margin:0 auto;
  }
  .price-table th, .price-table td{
    padding:1.2rem 1.6rem;
    text-align:left;
    border-bottom:1px solid var(--line);
  }
  .price-table th{
    font-family:'Cinzel';
    font-size:0.82rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold-deep);
    font-weight:500;
  }
  .price-table td:last-child, .price-table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
  .price-table tr:last-child td{ border-bottom:none; }
  .price-note{
    max-width:640px;
    margin:1.2rem auto 0;
    font-size:0.85rem;
    color:var(--ink-soft);
    text-align:center;
    letter-spacing:0.03em;
  }
  .price-copy{
    max-width:640px;
    margin:3rem auto 0;
    text-align:center;
    color:var(--ink-soft);
  }
  .price-copy p{ margin:0 0 1rem; }

  /* ---------- kontakt ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5vw;
    align-items:center;
  }
  .contact-cards{ display:flex; flex-direction:column; gap:1.3rem; margin-top:2.2rem; }
  .contact-card{
    display:flex;
    align-items:center;
    gap:1.1rem;
    background:var(--card);
    border:1px solid var(--line);
    padding:1.3rem 1.5rem;
    transition:border-color 0.3s ease;
  }
  .contact-card:hover{ border-color:var(--gold); }
  .contact-icon{
    width:44px; height:44px;
    border:1px solid var(--gold);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep);
    flex-shrink:0;
    font-size:1.1rem;
  }
  .contact-card .lbl{
    display:block;
    font-family:'Cinzel';
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold-deep);
    margin-bottom:0.2rem;
  }
  .contact-card .val{ font-size:1.02rem; color:var(--ink); }
  .contact-media .ring-frame{ aspect-ratio:1/1; }
  .contact-media .ring-frame img{ width:90%; height:90%; top:5%; left:5%; }
  @media (max-width:860px){
    .contact-grid{ grid-template-columns:1fr; text-align:center; }
    .contact-media{ order:-1; width:60%; margin:0 auto 1rem; }
    .contact-card{ text-align:left; }
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--ink);
    color:var(--bg-alt);
    padding:3.4rem 0 2.2rem;
    text-align:center;
  }
  footer .script{ font-size:2.6rem; color:var(--gold-light); display:block; margin-bottom:0.6rem; }
  footer h3{ color:var(--bg-alt); font-size:1rem; letter-spacing:0.16em; margin-bottom:1.4rem; }
  .footer-links{
    display:flex; justify-content:center; gap:2.2rem;
    flex-wrap:wrap;
    margin-bottom:2rem;
    font-size:0.85rem;
    letter-spacing:0.05em;
    color:var(--gold-light);
  }
  .footer-fine{
    font-size:0.78rem;
    color:rgba(246,241,230,0.55);
    letter-spacing:0.04em;
    border-top:1px solid rgba(246,241,230,0.15);
    padding-top:1.6rem;
    margin-top:0.5rem;
  }

/* ---------- legal pages ---------- */
.legal-hero{
  padding:8.5rem 0 3rem;
  text-align:center;
}
.legal-hero .eyebrow{ justify-content:center; }
.legal-hero h1{
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  margin:1rem 0 0;
}
.legal{
  padding:1rem 0 6rem;
}
.legal .wrap{ max-width:820px; }
.legal h2{
  font-family:'Cinzel', serif;
  font-size:1.15rem;
  letter-spacing:0.06em;
  margin:3rem 0 1rem;
  color:var(--ink);
}
.legal h2:first-of-type{ margin-top:0; }
.legal h3{
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:1rem;
  letter-spacing:0.02em;
  margin:1.8rem 0 0.6rem;
  color:var(--gold-deep);
}
.legal p, .legal li{
  color:var(--ink-soft);
  font-size:0.98rem;
  margin:0 0 1rem;
}
.legal ul{ padding-left:1.2rem; margin:0 0 1.2rem; }
.legal a{ color:var(--gold-deep); border-bottom:1px solid var(--gold-light); }
.legal a:hover{ color:var(--ink); border-color:var(--ink); }
.legal .fill{
  background:#FBF3E4;
  border:1px dashed var(--gold);
  padding:0.05rem 0.5rem;
  color:var(--ink);
  font-style:italic;
}
.legal .note-box{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  padding:1.2rem 1.4rem;
  margin:2rem 0;
  font-size:0.92rem;
}
.legal .note-box p{ margin:0; color:var(--ink-soft); }
.legal-back{
  display:inline-block;
  margin-bottom:1.4rem;
  font-size:0.8rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-deep);
}

/* ---------- utility classes (replace former inline styles) ---------- */
.service-extra-lead{ color:var(--ink-soft); margin:0 0 1rem; }
.service-extra-label{ color:var(--ink-soft); margin:0 0 0.4rem; }
.service-extra-label strong{ color:var(--ink); font-weight:500; }
.kontakt-title{ margin:1rem 0 1.2rem; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.kontakt-copy{ color:var(--ink-soft); }
.footer-legal-link{ color:inherit; border-bottom:1px solid rgba(246,241,230,0.3); }

/* ---------- keyboard focus ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
}