:root{
  /* Tiefes Petrol/Blaugrün – seriös, aber klar vom Kanzlei-Navy abgesetzt.
     Anschlussfähig an MBS-Farbwelt, ohne sie zu kopieren. */
  --navy:#0e2a2f;
  --navy-2:#143439;
  --ivory:#f1ece0;
  --ivory-2:#e6dfce;
  --ivory-muted:#b8b19f;
  --gold:#b89961;
  --gold-soft:#d7be89;
  --rule:rgba(241,236,224,.16);
  --measure:62ch;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy);
  color:var(--ivory);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--ivory);text-decoration:none;border-bottom:1px solid rgba(244,237,224,.35);transition:border-color .2s,color .2s}
a:hover{color:var(--gold-soft);border-color:var(--gold-soft)}

.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.narrow{max-width:640px}

/* --- header --- */
.site-header{
  padding:28px 0 20px;
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{color:var(--ivory);border:0;display:inline-flex;align-items:center;line-height:1}
.brand-mark{color:var(--ivory)}
.brand:hover .brand-mark{color:var(--gold-soft)}
nav.top{display:flex;gap:28px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-muted)}
nav.top a{border:0;color:var(--ivory-muted);font-weight:400}
nav.top a:hover{color:var(--gold-soft)}

/* --- mobiles menü (hamburger) --- */
.nav-burger{
  display:none;
  appearance:none;
  background:none;
  border:0;
  padding:8px;
  margin:-8px -8px -8px 0;
  cursor:pointer;
  color:var(--ivory-muted);
  line-height:0;
}
.nav-burger:hover{color:var(--gold-soft)}
.nav-burger:focus-visible{outline:1px solid var(--gold-soft);outline-offset:3px}
.nav-burger span{
  display:block;
  width:24px;
  height:1px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-burger span + span{margin-top:6px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:720px){
  .site-header{padding:20px 0 16px}
  .site-header .wrap{flex-wrap:wrap;gap:0}
  .nav-burger{display:block}
  nav.top{
    flex-basis:100%;
    order:3;
    display:none;
    flex-direction:column;
    gap:0;
    margin-top:16px;
    padding-top:4px;
    border-top:1px solid var(--rule);
  }
  nav.top.is-open{display:flex}
  nav.top a{
    padding:13px 0;
    font-size:13px;
    border-bottom:1px solid rgba(241,236,224,.08);
  }
  nav.top a:last-child{border-bottom:0}
}

/* --- hero --- */
.hero{
  padding:clamp(48px,10vw,120px) 0 clamp(56px,10vw,120px);
  border-bottom:1px solid var(--rule);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr}}
.hero h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(36px,5.2vw,60px);
  line-height:1.08;
  letter-spacing:-.005em;
  margin:0 0 28px;
  color:var(--ivory);
}
.hero h1 .accent{color:var(--gold-soft);font-style:italic;font-weight:500}
.hero p.lede{
  font-size:clamp(17px,1.4vw,19px);
  line-height:1.6;
  color:var(--ivory-2);
  max-width:52ch;
  margin:0;
}
.hero-photo{
  border:1px solid var(--rule);
  overflow:hidden;
  background:#000;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(.98)}

/* --- section --- */
section{padding:clamp(56px,9vw,110px) 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
  font-weight:500;
}
h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.15;
  margin:0 0 24px;
  color:var(--ivory);
  letter-spacing:-.003em;
}
h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:22px;
  margin:0 0 10px;
  color:var(--ivory);
}
p{margin:0 0 18px;max-width:var(--measure);color:var(--ivory-2)}
p.large{font-size:19px;line-height:1.6}
p:last-child{margin-bottom:0}

/* --- arbeitsflächen --- */
.visit{
  display:inline-block;
  margin-top:22px;
  font-size:13.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivory);
  border:0;
  padding-bottom:3px;
  border-bottom:1px solid var(--gold-soft);
}
.visit:hover{color:var(--gold-soft)}

/* --- leitsatz block --- */
.leitsatz{
  background:var(--navy-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.leitsatz p{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.4;
  color:var(--ivory);
  max-width:38ch;
  margin:0 auto;
  text-align:center;
}
.leitsatz .signoff{
  display:block;
  margin-top:22px;
  font-family:"Inter",sans-serif;
  font-style:normal;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

/* --- section mit foto --- */
.section-with-image{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:900px){.section-with-image{grid-template-columns:1.15fr 1fr}
  .section-with-image.reverse .section-text{order:2}
  .section-with-image.reverse .section-photo{order:1}
}
.section-photo{margin:0;border:1px solid var(--rule);overflow:hidden;background:#000}
.section-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(.98);aspect-ratio:4/3}

/* --- alphabet strip --- */
.alphabet{display:flex;gap:clamp(12px,2vw,28px);margin:8px 0 32px;flex-wrap:wrap}
.letter{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(28px,3.6vw,42px);
  color:var(--ivory-muted);
  opacity:.35;
  letter-spacing:.02em;
  font-weight:400;
  transition:opacity .3s,color .3s;
}
.letter em{color:var(--gold);font-style:normal;font-size:.9em;margin-left:1px}
.letter.active{color:var(--ivory);opacity:1}
.letter.active em{color:var(--gold-soft)}

/* --- logo showcase --- */
.logo-note{margin-top:16px;padding-top:32px;border-top:1px solid var(--rule)}
.logo-showcase{padding:32px 0 24px}

/* --- kette (verbindung sk → hbf) --- */
.kette{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:var(--measure);
}
.kette p{margin:0}
.kette p em{
  color:var(--gold-soft);
  font-style:normal;
  border-bottom:1px solid var(--gold);
  padding-bottom:1px;
}

/* --- namen block --- */
.name-box{
  border-left:2px solid var(--gold);
  padding:6px 0 6px 22px;
  max-width:var(--measure);
}
.name-box .initial{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:60px;
  line-height:1;
  color:var(--gold-soft);
  float:left;
  margin:2px 14px 0 -6px;
  font-weight:400;
}

/* --- kontakt --- */
.kontakt-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:var(--measure)}
@media (min-width:720px){.kontakt-grid{grid-template-columns:1fr 1fr}}
.kontakt-grid dl{margin:0}
.kontakt-grid dt{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;font-weight:500;
}
.kontakt-grid dd{margin:0 0 18px;color:var(--ivory-2)}
.kontakt-grid a{color:var(--ivory-2)}

/* --- footer --- */
footer.site-footer{
  padding:40px 0 56px;
  font-size:13px;
  color:var(--ivory-muted);
  border-top:1px solid var(--rule);
}
footer.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:baseline}
footer.site-footer a{color:var(--ivory-muted);border:0;margin-right:20px}
footer.site-footer a:hover{color:var(--gold-soft)}
/* --- Rechtsseiten (Impressum, Datenschutz) --- */
.legal-page{padding:clamp(48px,8vw,88px) 0 clamp(64px,10vw,120px)}
.legal-page .wrap{max-width:820px}
.legal-page h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(32px,4vw,48px);
  line-height:1.15;
  color:var(--ivory);
  margin:0 0 40px;
  letter-spacing:-.003em;
}
.legal-page h2{
  font-size:clamp(22px,2.4vw,26px);
  margin-top:48px;
  margin-bottom:14px;
}
.legal-page h3{
  font-family:"Inter",sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:32px 0 10px;
}
.legal-page p,.legal-page li{color:var(--ivory-2);font-size:15.5px;line-height:1.65;max-width:none}
.legal-page ul{padding-left:20px;margin:0 0 18px}
.legal-page ul li{margin-bottom:6px}
.legal-page .kontaktblock{
  padding:24px 28px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));
  margin:24px 0;
  font-size:15.5px;
  line-height:1.7;
}
.legal-page .kontaktblock strong{color:var(--ivory);font-weight:500}
.legal-page .back{
  display:inline-block;
  margin-bottom:32px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivory-muted);
  border:0;
}
.legal-page .back:hover{color:var(--gold-soft)}