/* ==========================================================================
   Villa Zeltweg · Seite «Ästhetische Behandlung Zürich»
   Gestaltung nach dem Internationalen Typografischen Stil: sichtbares Raster,
   Nummerierung, sachliche Tabellen, kein Zierrat. Zurückhaltung als Haltung,
   nicht als Mangel.

   Eigener Namensraum --sw-*, weil style.css die globalen Marken je nach
   Abschnitt auf ein dunkles Schema umstellt.
   ========================================================================== */
.sw{
  --sw-ink:#241B2F; --sw-muted:#5C5266; --sw-line:#DDD5CC; --sw-line-stark:#241B2F;
  --sw-sand:#F2EEEA; --sw-weiss:#FFFFFF; --sw-taupe:#816A5E; --sw-aubergine:#281432;
  --sw-body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
  --sw-display:'Bodoni Moda',Georgia,serif;
  font-family:var(--sw-body); color:var(--sw-ink);
}
.sw *{box-sizing:border-box}

/* ---------- Kopf ---------- */
.sw-kopf{border-top:2px solid var(--sw-line-stark);padding:26px 0 54px}
.sw-kopf__meta{display:flex;flex-wrap:wrap;gap:6px 30px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sw-muted);margin:0 0 40px}
.sw-kopf h1{font-family:var(--sw-display);font-weight:400;font-size:clamp(2.1rem,4.4vw,3.5rem);
  line-height:1.08;letter-spacing:-.01em;color:var(--sw-ink);margin:0 0 22px;max-width:16ch}
.sw-kopf h1 em{font-style:italic}
.sw-kopf__lead{font-size:1.16rem;line-height:1.56;color:var(--sw-muted);max-width:44ch;margin:0}

/* ---------- Das Raster: nummerierte Punkte ---------- */
.sw-raster{border-top:1px solid var(--sw-line-stark);margin:0 0 70px}
.sw-punkt{display:grid;grid-template-columns:60px 1fr 1fr;gap:0 32px;
  border-bottom:1px solid var(--sw-line);padding:26px 0;align-items:start}
@media (max-width:800px){
  .sw-punkt{grid-template-columns:38px 1fr;gap:0 18px}
  .sw-punkt__antwort{grid-column:2}
}
.sw-punkt__nr{font-size:.74rem;letter-spacing:.1em;color:var(--sw-taupe);font-weight:600;
  padding-top:.32em;font-variant-numeric:tabular-nums}
.sw-punkt__frage{font-family:var(--sw-display);font-weight:400;font-size:1.3rem;line-height:1.24;
  color:var(--sw-ink);margin:0}
.sw-punkt__antwort{font-size:.97rem;line-height:1.62;color:var(--sw-muted);margin:0}
@media (max-width:800px){.sw-punkt__antwort{margin-top:12px}}
.sw-punkt__antwort strong{color:var(--sw-ink);font-weight:600}
.sw-punkt__antwort a{color:var(--sw-taupe);text-decoration:underline;text-underline-offset:2px}

/* ---------- Zweispalter für Gegenüberstellungen ---------- */
.sw-gegen{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--sw-line-stark);margin:0 0 70px}
@media (max-width:800px){.sw-gegen{grid-template-columns:1fr}}
.sw-gegen__sp{padding:28px 32px 32px 0}
.sw-gegen__sp + .sw-gegen__sp{border-left:1px solid var(--sw-line);padding-left:32px}
@media (max-width:800px){
  .sw-gegen__sp{padding:24px 0}
  .sw-gegen__sp + .sw-gegen__sp{border-left:0;border-top:1px solid var(--sw-line);padding-left:0}
}
.sw-gegen__titel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sw-taupe);font-weight:600;margin:0 0 16px}
.sw-gegen ul{list-style:none;margin:0;padding:0}
.sw-gegen li{font-size:.97rem;line-height:1.5;color:var(--sw-ink);padding:9px 0 9px 20px;position:relative;
  border-bottom:1px solid var(--sw-line)}
.sw-gegen li:last-child{border-bottom:0}
.sw-gegen li::before{content:"";position:absolute;left:0;top:1.02em;width:9px;height:1px;background:var(--sw-taupe)}
.sw-gegen__nein li{color:var(--sw-muted)}
.sw-gegen__nein li::before{background:var(--sw-line)}

/* ---------- Preistafel, sachlich ---------- */
.sw-tafel{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.96rem}
.sw-tafel th{text-align:left;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sw-muted);font-weight:600;padding:0 16px 10px 0;border-bottom:1px solid var(--sw-line-stark)}
.sw-tafel td{padding:13px 16px 13px 0;border-bottom:1px solid var(--sw-line);color:var(--sw-ink);vertical-align:top}
.sw-tafel td:last-child{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-tafel tr:last-child td{border-bottom:1px solid var(--sw-line-stark)}
.sw-tafel .sw-dauer{color:var(--sw-muted);font-size:.9rem}

/* ---------- Aussage, gross gesetzt ---------- */
.sw-aussage{border-top:2px solid var(--sw-line-stark);border-bottom:2px solid var(--sw-line-stark);
  padding:48px 0;margin:0 0 70px}
.sw-aussage p{font-family:var(--sw-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.26;color:var(--sw-ink);margin:0;max-width:24ch}
.sw-aussage p em{font-style:italic}
.sw-aussage cite{display:block;font-family:var(--sw-body);font-style:normal;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sw-muted);margin-top:22px}

/* ---------- Abschnittsmarke ---------- */
.sw-marke{display:flex;align-items:baseline;gap:18px;border-top:2px solid var(--sw-line-stark);
  padding:22px 0 30px;margin:0}
.sw-marke__nr{font-size:.72rem;letter-spacing:.1em;color:var(--sw-taupe);font-weight:600;
  font-variant-numeric:tabular-nums;flex:none;min-width:42px}
.sw-marke h2{font-family:var(--sw-display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.18;color:var(--sw-ink);margin:0}

/* ---------- Schlussband ---------- */
.sw-schluss{background:var(--sw-aubergine);color:#fff;padding:52px 44px;margin:0 0 10px}
@media (max-width:800px){.sw-schluss{padding:36px 24px}}
.sw-schluss h2{font-family:var(--sw-display);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.1rem);
  color:#fff;line-height:1.2;margin:0 0 16px;max-width:20ch}
.sw-schluss p{color:rgba(255,255,255,.76);font-size:1rem;line-height:1.6;margin:0 0 28px;max-width:46ch}
.sw-schluss__akt{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sw-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;
  border:1px solid #C9B8A8;background:#C9B8A8;color:var(--sw-aubergine);font-family:var(--sw-body);
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .2s,border-color .2s}
.sw-btn:hover{background:#fff;border-color:#fff;color:var(--sw-aubergine);text-decoration:none}
.sw-btn--leise{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sw-btn--leise:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ---------- Kurzfassung auf der Startseite ---------- */
/* Eigene helle Fläche: der Block sitzt auf der Startseite in einem dunklen
   Abschnitt (body ist dort Aubergine). Ohne eigenen Grund stünde dunkle
   Schrift auf dunklem Grund. Das Absetzen ist hier zugleich erwünscht. */
.sw-teaser{background:#F2EEEA;border-top:2px solid #241B2F;padding:38px 42px 36px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;
  font-family:'Source Sans 3','Helvetica Neue',Arial,sans-serif}
@media (max-width:800px){.sw-teaser{padding:28px 22px 26px}}
@media (max-width:800px){.sw-teaser{grid-template-columns:1fr;align-items:start;gap:18px}}
.sw-teaser__eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#816A5E;
  font-weight:600;margin:0 0 14px}
.sw-teaser h2{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.2;color:#241B2F;margin:0 0 12px;max-width:22ch}
.sw-teaser p{font-size:1rem;line-height:1.6;color:#5C5266;margin:0;max-width:52ch}
.sw-teaser__liste{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;padding:0;list-style:none}
.sw-teaser__liste li{font-size:.86rem;color:#5C5266;position:relative;padding-left:15px}
.sw-teaser__liste li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:#816A5E}
.sw-teaser__cta{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:#241B2F;border-bottom:1px solid #241B2F;
  padding-bottom:6px;white-space:nowrap}
.sw-teaser__cta:hover{color:#816A5E;border-color:#816A5E;text-decoration:none}

/* ── Linksbündig statt zentriert ────────────────────────────────────────────
   .page-head der Website zentriert Kopfzeilen. Der Internationale
   Typografische Stil arbeitet asymmetrisch und linksbündig; die Zentrierung
   wird hier deshalb zurückgenommen. Spezifität passend zu .page-head h1. */
.page-head.sw,
.page-head.sw .wrap{text-align:left}
.page-head.sw .sw-kopf h1,
.page-head.sw .sw-kopf__lead,
.page-head.sw .sw-kopf__meta{margin-left:0;margin-right:auto;text-align:left}
.page-head.sw{padding-top:34px;padding-bottom:0}
.sw-kopf{padding-top:22px}

/* Raster sichtbar machen: der Kopf sitzt auf derselben Spalte wie die Punkte */
@media (min-width:801px){
  .sw-kopf h1{max-width:15ch}
  .sw-kopf__lead{max-width:46ch}
}