/* Schall & Wandel — „Stille Welle" shared stylesheet for CI sheets and
   base materials (brand/brand-identity.md §3). Self-hosted fonts (SIL OFL),
   no network needed. Used by brand/sheets/ and brand/materials/. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-tight-latin-wght-normal.f5af7a761c2b.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-latin-wght-italic.94402255a099.woff2") format("woff2")}

:root{
  /* colour tokens (brand book §3.2) */
  --paper:#FAFBF9; --mist:#ECF5F1; --mint:#C4E8DC; --mint-deep:#8FCDBB;
  --teal:#0D6E63; --teal-deep:#09564D; --ink:#13211E; --slate:#46595B; --hairline:#DCE7E2;
  --on-ink-muted:#B8C7C2;
  /* logo-only tones (never UI tokens) */
  --logo-teal:#4CC2B8; --logo-soft:#9CD7D1; --logo-ink:#172E2E;
  /* type */
  --display:"Inter Tight",Inter,system-ui,sans-serif;
  --body:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --accent:Newsreader,"Iowan Old Style",Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper)}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.2vw,4.6rem);max-width:18ch}
h2{font-size:clamp(1.7rem,3.3vw,2.9rem);line-height:1.06;letter-spacing:-.03em;max-width:24ch}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
p{max-width:64ch}
.muted{color:var(--slate)}
em,.accent{font-family:var(--accent);font-style:italic;font-weight:500;color:var(--teal)}
a{color:var(--teal);text-decoration:none;border-bottom:2px solid var(--teal)}
strong{font-weight:600}

/* eyebrow with ring-dot (§3.5.2) */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal-deep)}
.eyebrow::before{content:"";width:9px;height:9px;border:2px solid var(--teal);border-radius:50%;flex:none}

/* CTAs: two levels only (§3.5.3) */
.btn{display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:1rem;
  background:var(--teal);color:#fff;border-radius:999px;padding:.8em 1.5em;border:0}
.btn.secondary{background:transparent;color:var(--teal);padding:.3em 0;border-radius:0;border-bottom:3px solid var(--teal)}

/* cards, orbs, honesty box */
.card{background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:22px 24px}
.card .k{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px}
.orb{width:40px;height:40px;border-radius:50%;background:var(--mist);display:grid;place-items:center}
.orb i{width:10px;height:10px;border-radius:50%;background:var(--teal);display:block}
.honesty{border:1.5px solid var(--teal);border-radius:14px;padding:14px 18px;background:#fff;font-size:.92rem;max-width:66ch}
.honesty strong{color:var(--teal-deep)}
.pill{display:inline-block;background:var(--mist);color:var(--teal-deep);border-radius:999px;padding:5px 14px;font-size:.76rem;font-weight:600}
.pill.solid{background:var(--teal);color:#fff}

/* dark („Ehrlich erklärt") surfaces */
.dark{background:var(--ink);color:var(--paper)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .muted{color:var(--on-ink-muted)}
.dark em,.dark .accent{color:var(--mint-deep)}
.dark .eyebrow{color:var(--mint-deep)}
.dark .eyebrow::before{border-color:var(--mint-deep)}
.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.dark .card .k{color:var(--mint-deep)}
.dark .honesty{background:transparent;border-color:var(--mint-deep);color:var(--paper)}
.dark .honesty strong{color:var(--mint-deep)}
.dark .btn{background:var(--mint-deep);color:var(--ink)}
.dark .btn.secondary{background:transparent;color:var(--mint-deep);border-color:var(--mint-deep)}
.dark a{color:var(--mint-deep);border-color:var(--mint-deep)}
.mist{background:var(--mist)}

/* Punkt & Welle (§3.5.1): a filled teal dot with thin expanding rings */
.rings{pointer-events:none}
.rings circle{fill:none;stroke:var(--mint-deep);stroke-width:1.2}
.rings .core{fill:var(--teal);stroke:none}
.dark .rings circle{opacity:.4}
.disc{position:absolute;border-radius:50%;background:var(--mist);pointer-events:none;z-index:0}

/* lists with ring-dot bullets */
ul.clean{list-style:none;display:grid;gap:10px}
ul.clean li{padding-left:24px;position:relative;max-width:62ch}
ul.clean li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border:2px solid var(--teal);border-radius:50%}
.dark ul.clean li::before{border-color:var(--mint-deep)}

/* tables */
table.sw{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem;background:#fff;border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
table.sw th,table.sw td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--mist);vertical-align:top}
table.sw th{background:var(--mist);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);font-weight:600}
table.sw tr:last-child td{border-bottom:0}

@media print{
  html,body{background:#fff}
  a{border-bottom:0}
}