:root {
  --bone:#f7f4ee; --navy:#0f2740; --ink:#16263b; --muted:#4a5868;
  --brass:#a07d3e; /* decorative/brand accent only — not for text (use --brass-text/-btn) */ --brass-text:#8a6a2f; /* darker for AA text on bone */ --brass-l:#c9a96a; --brass-btn:#7a5e28;
  --surface:#ffffff; --line:#e7e1d5;
  --maxw:1000px; --pad:2.4rem; --radius:12px;
  --font-serif:"Fraunces", Georgia, serif;
  --font-sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color-scheme: light;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--bone); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--brass-text); }

h1,h2,h3 { font-family:var(--font-serif); font-weight:400; color:var(--navy); line-height:1.1; }
h1 { font-size:clamp(2.1rem,5vw,3rem); margin:0 0 1.2rem; }
h2 { font-size:clamp(1.6rem,3.5vw,2rem); margin:0 0 2rem; }
h3 { font-size:1rem; margin:.5rem 0 .4rem; }
.em { font-style:italic; color:var(--brass-text); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
/* only pad top/bottom — the `0` in the old `padding: <v> 0` shorthand was
   wiping out .wrap's horizontal padding, so .sec content hugged the edge */
.sec { padding-block:clamp(2.4rem,6vw,3.6rem); }
.seclabel { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-text); margin-bottom:.7rem; }
.lead { font-size:1.02rem; color:var(--muted); max-width:34rem; }

/* buttons */
.btn { font-family:inherit; display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; font-weight:600; font-size:.85rem;
       padding:.7rem 1.3rem; text-decoration:none; cursor:pointer; border:none; line-height:1; }
.btn-primary { background:var(--brass-btn); color:#fff; }
.btn-dark { background:var(--navy); color:var(--bone); }
.btn-ghost { background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px #cbd0d8; }
.btn:focus-visible, a:focus-visible { outline:3px solid var(--brass-l); outline-offset:2px; }

/* skip link for a11y */
.skip { position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.6rem 1rem; z-index:100; }
.skip:focus { left:0; }

/* nav */
.site-header { position:sticky; top:0; z-index:50; background:rgba(247,244,238,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; gap:1.6rem; padding-top:1rem; padding-bottom:1rem; position:relative; }
.brand { font-family:var(--font-serif); font-weight:600; font-size:1.15rem; letter-spacing:.02em; color:var(--navy); text-decoration:none; }
.site-header .brand { font-size:2.4rem; line-height:1.05; }
.brand-sub { display:block; font-family:var(--font-sans); font-weight:600; font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-text); margin-top:.2rem; }
.nav-menu { margin-left:auto; display:flex; align-items:center; gap:1.2rem; font-size:.88rem; }
.nav-menu a { color:var(--ink); text-decoration:none; }
.nav-menu a.btn-dark { color:var(--bone); }
.nav-tel { color:var(--brass-text); font-weight:600; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.nav-toggle span { width:24px; height:2px; background:var(--navy); display:block; }

@media (max-width:760px) {
  /* keep the original generous side gutter (--pad:2.4rem) on mobile so content
     doesn't hug the edge; the nav stays usable via overflow-x:hidden + the
     absolute toggle + the dropdown menu below */
  .nav-toggle { display:flex; position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); }
  .nav-menu { position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start;
              background:var(--bone); border-bottom:1px solid var(--line); padding:1rem var(--pad); gap:1rem; }
  .nav-menu[data-open="false"] { display:none; }
  .nav-menu[data-open="true"] { display:flex; }
}

/* hero */
.hero { padding-top:clamp(2.4rem,5vw,3.6rem); padding-bottom:clamp(2.6rem,6vw,3.8rem); }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
@media (max-width:760px) { .hero-actions { justify-content:center; } }

/* leistungen */
.grid { display:grid; gap:1rem; list-style:none; margin:0; padding:0; }
.cards { grid-template-columns:repeat(3,1fr); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.3rem; }
.card .no { font-family:var(--font-serif); color:var(--brass-text); font-size:1.1rem; }
.card p { font-size:.9rem; color:var(--muted); margin:0; }
/* Krypto-Karte: Interieur im Stil der naco-krypto-Seite (dunkel/cyber, Cyan-Akzent) */
.card--crypto { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(160deg,#0a0b0f,#05060a);
                border-color:#1b2a31; box-shadow:0 0 0 1px rgba(34,211,238,.18), 0 10px 30px rgba(34,211,238,.10); }
/* weicher, runder Cyan-Glow auf dem dunklen Hintergrund, hinter dem Text */
.card--crypto::before { content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-50%);
                width:190px; height:190px; border-radius:50%; pointer-events:none; filter:blur(18px);
                background:radial-gradient(circle, rgba(34,211,238,.45), rgba(34,211,238,0) 70%);
                animation:naco-glow-pulse 4s ease-in-out infinite; }
@keyframes naco-glow-pulse {
  0%,100% { opacity:.8; transform:translate(-50%,-50%) scale(.96); }
  50%     { opacity:1;  transform:translate(-50%,-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .card--crypto::before { animation:none; } }
/* cyan Rechtspfeil unten rechts vorerst entfernt — kommt zurück als Link zur naco-krypto-Seite */
.card--crypto .no { color:#22d3ee; font-family:ui-monospace,"SF Mono",Menlo,monospace; text-shadow:0 0 12px rgba(34,211,238,.55); }
.card--crypto h3 { color:#e6f6ff; font-family:var(--font-sans); font-weight:600; letter-spacing:.01em; }
.card--crypto p { color:#9aa8b5; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }
@media (min-width:760px) and (max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); } }

/* trust band */
.band { background:var(--navy); color:var(--bone); padding:clamp(2rem,5vw,2.8rem) 0; }
.band-grid { display:grid; grid-template-columns:1.3fr repeat(3,.9fr); gap:1.6rem; align-items:center; }
.band-claim { font-family:var(--font-serif); font-size:1.5rem; line-height:1.2; margin:0; }
.stat { display:flex; flex-direction:column; }
.stat .n { font-family:var(--font-serif); font-size:2rem; color:var(--brass-l); }
.stat .l { font-size:.82rem; opacity:.8; }
@media (max-width:760px){ .band-grid{ grid-template-columns:1fr 1fr; } .band-claim{ grid-column:1/-1; } }

/* kanzlei / team */
.lead-wide { max-width:42rem; }
.team { list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1rem; }
.member { display:flex; align-items:center; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.55rem 1.2rem; font-size:.88rem; }
.member b { color:var(--navy); }

/* kontakt */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.contact-actions .btn { margin:0 .5rem .8rem 0; }
.contact-info { font-style:normal; color:var(--muted); line-height:1.7; margin-top:1rem; }
.contact-info b { color:var(--navy); }
.map { position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.map img { width:100%; }
.map-cta { position:absolute; bottom:.6rem; right:.6rem; background:var(--navy); color:#fff; font-size:.75rem; padding:.4rem .7rem; border-radius:6px; }
@media (max-width:760px){ .contact{ grid-template-columns:1fr; } }
/* mobile: center the button groups and the team name pills horizontally
   (address stays left-aligned for readability) */
@media (max-width:760px){
  .team{ justify-content:center; }
  .contact-actions{ text-align:center; }
  .contact-actions .btn{ margin:0 .25rem .8rem; }
  .contact-info{ text-align:left; }
}

/* legal pages */
.legal { max-width:760px; }
.legal h1 { margin-top:1rem; }
.legal p { color:var(--ink); }
.legal b { color:var(--navy); }

/* footer */
.site-footer { background:var(--ink); color:#aeb8c4; font-size:.82rem; padding:1.6rem 0; }
.foot { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.foot a { color:#cdd6e0; text-decoration:none; }
.foot-right { margin-left:auto; }
.foot-brand { color:#e7e1d5; }
.foot-version { color:#7e8a99; font-size:.76rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }