/* ==========================================================================
   LOKALE WEB-FONTS (DSGVO-KONFORM)
   ========================================================================== */

/* Inter Regular (400) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v13-latin-regular.woff2') format('woff2');
}

/* Inter Bold (700) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v13-latin-700.woff2') format('woff2');
}

/* Fraunces Regular (400) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-v31-latin-regular.woff2') format('woff2');
}

/* Fraunces Bold (700) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-v31-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   EXISTIERENDES CSS — osteopathen.berlin
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#F4F2ED; --fg:#1A1A1A; --primary:#C2761A; --muted:#6b6b67;
  --line:#1A1A1A; --line-soft:rgba(26,26,26,.18);
  --serif:"Fraunces", "Times New Roman", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:1320px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.container{padding:0 18px}}

/* ── Header ─────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;text-decoration:none;color:var(--fg)}
.brand .dot{color:var(--fg)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--fg);display:inline-flex;align-items:baseline;gap:8px}
.nav a .num{color:var(--primary);font-weight:500}
.nav a.active{color:var(--primary)}
.menu-toggle{display:none;border:1px solid var(--line);background:transparent;padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;cursor:pointer}
#menu{display:none}
@media (max-width:880px){
  .nav{display:none;position:fixed;inset:64px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 0}
  .nav a{padding:14px 28px;width:100%;border-top:1px solid var(--line-soft)}
  .menu-toggle{display:inline-block}
  #menu:checked ~ .nav{display:flex}
}

/* ── Hero ───────────────────────────────────── */
.hero{padding:72px 0 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);display:flex;align-items:center;gap:14px;margin:0 0 28px}
.eyebrow::before{content:"";width:48px;height:1px;background:var(--primary)}
.hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:start;padding-bottom:64px}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:36px}}
h1.display{font-family:var(--serif);font-weight:400;font-size:clamp(56px,9vw,148px);line-height:.95;letter-spacing:-.03em;margin:0}
h1.display .ital{font-style:italic;color:var(--primary);display:block}
.hero-aside{border-top:2px solid var(--primary);padding-top:22px;max-width:420px;margin-left:auto}
@media (max-width:960px){.hero-aside{margin-left:0}}
.hero-aside p{margin:0 0 24px;color:#2a2a28;font-size:16px;line-height:1.6}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);transition:transform .15s ease}
.btn-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg)}
.btn:hover{transform:translateY(-1px)}

/* ── Tag bar ────────────────────────────────── */
.tagbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.tagbar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.tagbar-inner .dot{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;margin-right:10px}
.tagbar-inner .sep{color:var(--line-soft)}
.tagbar-inner .tag.is-primary{color:var(--primary)}

/* ── Section ────────────────────────────────── */
section.block{padding:88px 0}
.section-head{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:end;margin-bottom:56px}
@media (max-width:960px){.section-head{grid-template-columns:1fr;gap:24px}}
.section-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);margin:0 0 18px}
h2.display{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(40px,5.5vw,72px);line-height:1;letter-spacing:-.02em;margin:0}
.section-lead{color:#2a2a28;font-size:16px;line-height:1.6;margin:0}

/* ── Index list ─────────────────────────────── */
.idx-list{border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:90px 1.4fr 1fr 110px;gap:32px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:background .2s ease;text-decoration:none;color:inherit}
.idx-row:hover{background:rgba(194,118,26,.05)}
.idx-row .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--primary)}
.idx-row .ttl{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.5vw,56px);line-height:1;letter-spacing:-.015em}
.idx-row .desc{color:#3a3a37;font-size:15px;line-height:1.55}
.idx-row .read{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);text-align:right;white-space:nowrap}
.idx-row .read .arr{margin-left:8px;transition:transform .2s}
.idx-row:hover .read .arr{transform:translateX(4px)}
@media (max-width:880px){
  .idx-row{grid-template-columns:60px 1fr;gap:14px 18px;padding:28px 0}
  .idx-row .ttl{grid-column:2;font-size:36px}
  .idx-row .desc{grid-column:2}
  .idx-row .read{grid-column:2;text-align:left}
}

/* ── Prose ──────────────────────────────────── */
.prose{max-width:760px;margin:0 auto;padding:24px 0 72px;font-size:17px;line-height:1.75}
.prose h2{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.1;letter-spacing:-.01em;margin:56px 0 18px}
.prose h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:36px 0 12px}
.prose p{margin:0 0 18px;color:#26261f}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul{padding-left:20px;margin:0 0 18px}
.prose li{margin:0 0 8px}
.prose blockquote{margin:28px 0;padding:18px 24px;border-left:2px solid var(--primary);font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:#1a1a1a;background:rgba(194,118,26,.05)}
.pull{border:1px solid var(--line);padding:28px;margin:36px 0;background:#fff}
.pull h3{margin-top:0;font-family:var(--serif);font-weight:500;font-size:22px}
.pull .btn{margin-top:8px}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--primary);font-size:22px}
.faq details[open] summary::after{content:"−"}
.faq .a{padding-top:14px;color:#26261f;line-height:1.65}

/* Footer */
footer.site-footer{border-top:1px solid var(--line);margin-top:48px;padding:48px 0 32px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;margin-bottom:36px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:20px}}
.foot-grid h4{margin:0 0 14px;color:var(--primary);font-weight:500;font-size:11px;letter-spacing:.18em}
.foot-grid a{display:block;color:var(--fg);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.foot-grid a:hover{border-bottom-color:var(--primary)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted)}
.foot-brand{font-family:var(--serif);font-size:24px;letter-spacing:-.01em;text-transform:none;margin:0 0 12px;color:var(--fg)}
.foot-claim{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:#3a3a37;max-width:34ch;line-height:1.55}

/* Mini Wolke card */
.wolke{border:1px solid var(--line);background:#fff;padding:32px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin:48px 0}
@media (max-width:760px){.wolke{grid-template-columns:1fr;text-align:left}}
.wolke .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.wolke .name{font-family:var(--serif);font-size:28px;letter-spacing:-.01em;margin:4px 0 0}
.wolke .desc{font-size:14px;color:#3a3a37}