/* ============================================================
   Volker van den Boom – Praxis für Paartherapie (Aachen)
   main.css – CI tokens and shared layout per CI styleguide
   modern.003 (mobile-first, a11y, reduced-motion aware)

   Plan #13 F1: build_pages.py splits this file at the marker
   comments " ==critical== " and " ==/critical== " — the marked
   regions are inlined into every static page, everything else is
   written to assets/css/deferred.css (loaded print-swap + noscript).
   session.report.php still links this file whole. Do not reorder
   rules across markers; seo_audit.py byte-verifies the split.
   ============================================================ */


/* plan #13 F4: date line — bottom margin >= doubled (≈1.5em of .text,
   collapses against following block margins) so CTA/trail separate */
.content .updated{font-size:.8rem;color:var(--ink-soft);margin:1.6rem 0 1.6rem}

.content figure{margin:1rem 0}
.content figure img{border-radius:5px;display:block;width:100%}
.content figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.35rem}

.content .figure-centered img{max-height:420px;width:auto;margin-inline:auto}
.content .figure-centered figcaption{text-align:center}


.grid{display:grid;gap:1.1rem}
@media (min-width:700px){
  .grid{grid-template-columns:1fr minmax(14rem,17rem);align-items:start}
}

/* ---- cards / callouts ---- */
.card{
  background:rgba(255,255,255,.55);
  border:1px solid var(--sage-group);
  border-radius:var(--radius);
  padding:.85rem .9rem 1rem;
}
.card h2{margin:.15rem 0 .2rem;font-size:1.05rem}
.card p{margin:.25rem 0;font-size:.92rem}

.btn{
  display:inline-block;padding:.45rem .75rem;
  background:var(--sage-group);text-decoration:none;border-radius:4px;border:1px solid var(--ink);
}
.btn:hover{background:var(--sage-hover)}

a.dl-pdf{display:inline-flex;align-items:center;gap:.4em;font-weight:700}
a.dl-pdf img{width:16px;height:16px}
.ext::after{content:" ↗";font-size:.8em;opacity:.7}

.contact-list{margin:0;padding:0;list-style:none}
.contact-list li{margin:0 0 .7rem}
.icon{width:14px;height:14px;opacity:.55;vertical-align:middle;margin-right:.3rem}

/* ---- FAQ ---- */
.faq-list{margin:0;padding:0;list-style:none}
.faq-list li{margin:0 0 .5rem}
details.faq{
  background:rgba(255,255,255,.55);border:1px solid var(--sage-group);
  border-radius:var(--radius);padding:0;
}
details.faq summary{
  cursor:pointer;font-weight:700;padding:.6rem .8rem;list-style:none;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"＋ ";color:var(--ok)}
details.faq[open] summary::before{content:"－ "}
details.faq .faq-body{padding:0 .8rem .8rem}

/* ---- tables (legal pages) ---- */
.content table{border-collapse:collapse;width:100%;font-size:.92rem}
.content th,.content td{border:1px solid var(--sage-group);padding:.4rem .55rem;text-align:left}

/* ---- footer ---- */
footer{
  background:var(--footer);color:var(--ivory);text-align:center;
  padding:.75rem 1rem;font-size:.9rem;
}
footer a{color:var(--ivory);text-decoration:none}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;margin-top:.25rem}


/* ---- print ---- */
@media print{
  body{background:#fff}
  .page{box-shadow:none;max-width:none;background:#fff}
  .rail,.drawer,.backdrop,.cookie,.menu-btn{display:none!important}
}