/* ==========================================================================
   Sachverständigenbüro Robert Magin — Klassik & Liebhaberfahrzeuge
   Ein einziges Stylesheet, keine Frameworks, keine externen Abrufe.
   Aufgebaut so, dass es später unverändert in den großen Büro-Auftritt passt:
   alle Regeln hängen an eigenen Klassen, nichts an absoluten Pfaden.
   ========================================================================== */

/* ---------- Schriften (lokal, keine Google-Server) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/PlayfairDisplay-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/PlayfairDisplay-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben & Maße ---------- */
:root {
  --ink: #191b1d;          /* Anthrazit, Fließtext und dunkle Flächen */
  --ink-soft: #4a4f55;     /* Nebentext */
  --ink-faint: #7c838b;
  --paper: #faf9f7;        /* warmes Off-White */
  --paper-2: #ffffff;
  --line: #e3e0da;
  --brass: #a8874f;        /* Messing – der einzige Zierton */
  --brass-soft: #c8ab7d;
  --signal: #a8141e;       /* gedämpftes Rot, nur für echte Signale */
  --ok-green: #26694a;
  --shadow-s: 0 1px 2px rgba(25, 27, 29, .06), 0 4px 12px rgba(25, 27, 29, .05);
  --shadow-m: 0 2px 6px rgba(25, 27, 29, .07), 0 18px 44px rgba(25, 27, 29, .10);
  --wrap: 1080px;
  --wrap-narrow: 760px;
  --r: 10px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -.008em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.2rem; font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(52px, 7vw, 96px); }
.section--paper { background: var(--paper-2); }
.section--dark { background: var(--ink); color: #e9e7e3; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--line { border-top: 1px solid var(--line); }
.section[id], main[id] { scroll-margin-top: 80px; }

.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .9em;
}
.rule { width: 46px; height: 2px; background: var(--brass); margin: 1.3rem 0 1.6rem; border: 0; }
.rule--center { margin-inline: auto; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }
.section--dark .lead { color: #bcc0c4; }
.center { text-align: center; }
.muted { color: var(--ink-faint); font-size: .88rem; }

/* ---------- Kopfleiste ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(25, 27, 29, .97);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.topbar__inner { display: flex; align-items: center; gap: 18px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand__mark {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  border: 1px solid var(--brass-soft);
  display: grid; place-items: center;
  font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700; color: var(--brass-soft);
}
.brand__text { color: #fff; line-height: 1.15; }
.brand__name { display: block; font-size: .93rem; font-weight: 650; letter-spacing: .02em; }
.brand__sub { display: block; font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--brass-soft); }

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: #c9ccd0; font-size: .87rem; font-weight: 500;
  padding: 7px 11px; border-radius: 7px; transition: color .15s, background-color .15s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.nav__cta { margin-left: 6px; }

.navtoggle {
  display: none; margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 7px; padding: 7px 11px; font: inherit; font-size: .82rem; cursor: pointer;
}
@media (max-width: 860px) {
  .navtoggle { display: block; }
  .nav {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding-bottom: 12px;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 11px 12px; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brass); border-radius: 7px; }
  .nav__cta { margin-left: 0; text-align: center; }
}

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: inherit; font-size: .87rem; font-weight: 600; letter-spacing: .04em;
  padding: 13px 24px; border-radius: 7px; border: 1px solid transparent;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: #8d0f18; }
.btn--ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .09); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--small { padding: 9px 16px; font-size: .8rem; }
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero__photo {
  position: absolute; inset: 0;
  background-image: url('cover.jpg');
  background-size: cover; background-position: center 42%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,16,18,.94) 0%, rgba(15,16,18,.86) 42%, rgba(15,16,18,.55) 100%);
}
.hero__inner { position: relative; padding-block: clamp(64px, 9vw, 128px); max-width: 720px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--brass-soft); }
.hero__lead { font-size: 1.12rem; color: #cfd2d5; max-width: 58ch; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16); list-style: none; padding-left: 0;
}
.hero__facts li { font-size: .83rem; color: #b9bdc1; }
.hero__facts b { display: block; color: #fff; font-size: 1.02rem; font-weight: 650; }

/* ---------- Karten & Raster ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; box-shadow: var(--shadow-s);
}
.section--paper .card { background: var(--paper); }
.card--link { text-decoration: none; display: block; transition: box-shadow .18s, border-color .18s, transform .18s; }
.card--link:hover { box-shadow: var(--shadow-m); border-color: var(--brass-soft); transform: translateY(-2px); }
.card--accent { border-color: var(--brass-soft); border-width: 1px; box-shadow: var(--shadow-m); }
.card h3 { margin-bottom: .45em; }
.card p { font-size: .95rem; color: var(--ink-soft); }
.card__num {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--brass);
  display: block; margin-bottom: .2em; line-height: 1;
}
.card__tag {
  display: inline-block; font-size: .67rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 650; color: var(--brass); margin-bottom: .9em;
}

.figures { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 30px; }
.figure b {
  display: block; font-family: 'Playfair Display', serif; font-size: 2.3rem;
  font-weight: 700; color: var(--signal); line-height: 1;
}
.section--dark .figure b { color: var(--brass-soft); }
.figure span { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Listen ---------- */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 27px; margin-bottom: .6em; font-size: .96rem; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 9px; height: 5px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps > li {
  counter-increment: s; position: relative; padding-left: 62px;
  padding-bottom: 30px; border-left: 1px solid var(--line); margin-left: 17px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(s); position: absolute; left: -17px; top: -2px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: .85rem; font-weight: 650;
  font-family: 'Inter', sans-serif;
}
.steps h3 { margin-bottom: .3em; }
.steps p { font-size: .96rem; color: var(--ink-soft); }

blockquote.pull {
  margin: 0; padding: 24px 26px; border-left: 3px solid var(--brass);
  background: var(--paper-2); border-radius: 0 var(--r) var(--r) 0;
  font-family: 'Playfair Display', serif; font-size: 1.2rem; line-height: 1.5;
}
.section--paper blockquote.pull { background: var(--paper); }

.note {
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  background: var(--paper-2); border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 22px; font-size: .93rem; color: var(--ink-soft);
}
.section--paper .note { background: var(--paper); }

/* ---------- Tabellen (Honorar) ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.section--paper .tablewrap { background: var(--paper); }
table.rates { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 420px; }
table.rates th, table.rates td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.rates thead th {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  font-weight: 650; background: rgba(0, 0, 0, .02);
}
table.rates td.num, table.rates th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rates tbody tr:last-child td { border-bottom: 0; }
table.rates tr.sum td { font-weight: 650; background: rgba(168, 135, 79, .08); border-top: 1px solid var(--brass-soft); }
table.rates .sub { display: block; font-size: .82rem; color: var(--ink-faint); margin-top: 2px; }

/* ---------- Rechner ---------- */
.calc {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px; padding: clamp(22px, 3.4vw, 38px);
}
.calc__presets { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.preset {
  font: inherit; font-size: .8rem; cursor: pointer; padding: 8px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #dfe1e4;
  transition: background-color .15s, border-color .15s, color .15s;
}
.preset:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.preset[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: #17181a; font-weight: 600; }
.calc__row { margin-bottom: 22px; }
.calc__label { display: flex; justify-content: space-between; gap: 14px; font-size: .89rem; margin-bottom: 9px; }
.calc__label b { color: #fff; font-weight: 550; }
.calc__label span { color: var(--brass-soft); font-weight: 600; text-align: right; }
.calc input[type="range"] { width: 100%; accent-color: var(--brass); cursor: pointer; height: 26px; }
.calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 30px; }
.calc__box {
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: 20px 16px; text-align: center;
  background: rgba(255, 255, 255, .03);
}
.calc__box--ours { border-color: var(--brass); }
.calc__box i { font-style: normal; display: block; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
.calc__box em { font-style: normal; display: block; font-size: .73rem; color: #8d9399; margin-bottom: 10px; }
.calc__box strong {
  display: block; font-family: 'Playfair Display', serif; font-size: 2.15rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
}
.calc__box--ours strong { color: var(--brass-soft); }
.calc__verdict {
  margin-top: 22px; padding: 16px 20px; border-radius: 9px;
  background: rgba(168, 135, 79, .12); border: 1px solid rgba(168, 135, 79, .32);
  font-size: .95rem; color: #e7e4df; min-height: 3.2em;
}
.calc__verdict b { color: #fff; }

/* ---------- Formular ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > label { font-size: .85rem; font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 11px 13px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(168, 135, 79, .18); }
.field--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.field--check { display: flex; gap: 11px; align-items: flex-start; }
.field--check input { width: auto; margin-top: 4px; flex: 0 0 auto; }
.field--check label { font-size: .87rem; font-weight: 400; color: var(--ink-soft); line-height: 1.55; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--signal); }
.errmsg { font-size: .82rem; color: var(--signal); font-weight: 550; }
.flash { border-radius: var(--r); padding: 18px 22px; font-size: .95rem; margin-bottom: 26px; }
.flash--ok { background: #eaf3ee; border: 1px solid #bcd9c8; color: var(--ok-green); }
.flash--bad { background: #fbeced; border: 1px solid #e8c2c5; color: var(--signal); }

/* ---------- Kontaktzeile ---------- */
.contactlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contactlist a { text-decoration: none; font-weight: 600; }
.contactlist a:hover { text-decoration: underline; }
.contactlist span { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.section--dark .contactlist span { color: #8d9399; }

/* ---------- Fußbereich ---------- */
.footer { background: #101113; color: #8d9399; font-size: .86rem; padding-block: 48px 26px; }
.footer h4 { font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 1.1em; }
.footer a { color: #b9bdc1; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px; }
.footer__bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: .78rem;
}

/* ---------- Einblenden (nur mit JS, mit Netz darunter) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Druck ---------- */
@media print {
  .topbar, .footer, .no-print, .btnrow, .calc__presets { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding-block: 10mm; break-inside: avoid; }
  .hero__photo, .hero__scrim { display: none; }
  .hero { background: #fff; color: #000; }
  .hero h1, .hero__lead, .hero__facts li, .hero__facts b { color: #000; }
  .section--dark { background: #fff; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- Muster-Blätterer ---------- */
.muster-page { background: #141517; color: #e9e7e3; }
.muster-page .topbar { border-bottom-color: rgba(255,255,255,.12); }
.muster-buehne {
  position: relative; width: 100%; aspect-ratio: 1000 / 1416; max-width: 760px; margin-inline: auto;
  background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: contain;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.55);
  -webkit-user-select: none; user-select: none;
}
.muster-buehne::after { content: ""; position: absolute; inset: 0; }
.muster-wm {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 8px;
  background-image: repeating-linear-gradient(-30deg, transparent 0 120px, rgba(200,171,125,.14) 120px 122px);
}
.muster-wm span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: .42em; font-size: clamp(30px, 7vw, 74px);
  color: rgba(200,171,125,.17); transform: rotate(-30deg); white-space: nowrap;
}
.muster-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.muster-nav button {
  font: inherit; font-size: .85rem; cursor: pointer; padding: 9px 18px; border-radius: 7px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #e9e7e3;
}
.muster-nav button:hover { background: rgba(255,255,255,.17); }
.muster-nav span { font-variant-numeric: tabular-nums; font-size: .88rem; color: #a4a9ae; min-width: 74px; text-align: center; }
.muster-leiste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; margin-top: 26px;
}
.muster-thumb {
  aspect-ratio: 1000 / 1416; border-radius: 4px; cursor: pointer; padding: 0;
  background-size: cover; background-position: center top; background-color: #fff;
  border: 1px solid rgba(255,255,255,.16); transition: border-color .15s, box-shadow .15s;
}
.muster-thumb:hover { border-color: var(--brass-soft); }
.muster-thumb.is-on { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.muster-reiter { display: inline-flex; background: rgba(255,255,255,.07); border-radius: 9px; padding: 4px; gap: 3px; }
.muster-reiter button {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 8px 16px;
  border: 0; border-radius: 6px; background: transparent; color: #b9bdc1;
}
.muster-reiter button[aria-pressed="true"] { background: var(--signal); color: #fff; }

/* ---------- Werdegang / Stationen ---------- */
.vita { list-style: none; margin: 0; padding: 0; }
.vita > li {
  position: relative; padding: 0 0 22px 26px; margin: 0;
  border-left: 1px solid var(--line);
}
.vita > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.vita > li::before {
  content: ""; position: absolute; left: -5px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 4px var(--paper);
}
.section--paper .vita > li::before { box-shadow: 0 0 0 4px var(--paper-2); }
.vita b { display: block; font-size: 1.02rem; font-weight: 650; line-height: 1.4; }
.vita span {
  display: block; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin-bottom: .25em;
}
.vita p { font-size: .95rem; color: var(--ink-soft); margin: .35em 0 0; }

/* Schmales Vertrauensband */
.band { background: var(--ink); color: #e9e7e3; }
.band__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 26px;
}
.band__grid b {
  display: block; font-family: 'Playfair Display', serif; font-size: 1.65rem;
  color: var(--brass-soft); line-height: 1.1; margin-bottom: .2em;
}
.band__grid span { font-size: .88rem; color: #b9bdc1; }

/* ---------- Herausgestellter Stundensatz ---------- */
.ratebox {
  border: 1px solid var(--brass-soft); border-radius: var(--r);
  background: var(--paper-2); padding: 26px 28px; box-shadow: var(--shadow-s);
  display: grid; gap: 4px;
}
.section--paper .ratebox { background: var(--paper); }
.ratebox > span {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); font-weight: 650;
}
.ratebox > strong {
  font-family: 'Playfair Display', serif; font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.ratebox > em { font-style: normal; font-size: .93rem; color: var(--ink-soft); }