/* =========================================================================
   Fadenspiel — Die Nähwerkstatt
   Design tokens and components, reproduced from the approved design.
   ========================================================================= */

:root {
  /* Neutrals */
  --bg: #faf7f1;
  --page-surround: #f0eae0; /* body behind the page sheet */
  --ink: #33302a;
  --ink-soft: #6b655a;
  --ink-faint: #6f6a5f; /* darkened from design's #8d8578 to meet WCAG AA (≥4.5:1) on the cream bg */
  --nav-idle: #5b564c;

  /* Brand */
  --primary: #457187;
  --primary-dark: #2d4f60;

  /* Lines & surfaces */
  --line: #e7e1d4;
  --line-soft: #efe9dd;
  --line-faint: #f1ece1;
  --panel: #f4f0e7;
  --card: #fff;
  --nav-active-bg: #efe9dd;

  /* Dark sections */
  --dark: #33302a;
  --dark-line: #4a463e;
  --on-dark: #faf7f1;
  --on-dark-soft: #b8b2a4;

  /* WhatsApp (green) */
  --wa: #5f9b7c;
  --wa-ink: #3d7458;
  --wa-bg: #e9f1ec;
  --wa-border: #cfe0d6;
  --wa-bg-hover: #dcebe2;

  /* Signal (indigo) */
  --sg: #7b8ec9;
  --sg-ink: #4f63a0;
  --sg-bg: #eaedf6;
  --sg-border: #d5dcee;
  --sg-bg-hover: #dee4f1;

  /* Telegram (blue) */
  --tg: #6a94ad;
  --tg-ink: #3d6b85;
  --tg-bg: #e8eff4;
  --tg-border: #cddde7;
  --tg-bg-hover: #dbe8ef;

  /* Status */
  --warn: #b04a34;
  --warn-bg: #f9ece8;
  --seat-free: #5f9b7c;
  --seat-taken: #e4ded1;

  /* Type */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Layout */
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 6px;
}

/* --- Reset-ish ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-surround);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); margin: 0; font-weight: 600; }
p { margin: 0; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Readable by screen readers, invisible on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Page shell ---------------------------------------------------------- */
.page {
  max-width: 1280px;
  margin-inline: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(51, 48, 42, .04),
              0 10px 40px rgba(51, 48, 42, .07);
}
main { flex: 1 0 auto; }
.section { padding: clamp(36px, 6vw, 60px) var(--gutter) 64px; }
.section--tight { padding-bottom: 0; }

/* Generic building blocks reused across pages */
.eyebrow {
  font: 600 12px var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 18px;
}
.page-title { font: 600 clamp(32px, 4.5vw, 46px)/1.15 var(--serif); margin: 0 0 10px; }
.lead { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 70ch; margin: 0 0 36px; }
.footnote { font-size: 13.5px; line-height: 1.7; color: var(--ink-faint); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Kirbytext prose */
.prose > * + * { margin-top: 14px; }
.prose p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.prose h2 { font-size: 26px; margin-top: 28px; }
.prose h3 { font-size: 20px; margin-top: 22px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; color: var(--ink-soft); line-height: 1.7; }
.prose img { border-radius: 4px; }

/* Placeholder note for content the owner still needs to supply */
.placeholder {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--ink-faint);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px 14px;
  line-height: 1.6;
}

/* --- Buttons & pills ----------------------------------------------------- */
.btn {
  display: inline-block;
  font: 600 15px var(--sans);
  line-height: 1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, opacity .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { color: var(--on-dark); background: var(--primary); padding: 14px 30px; }
.btn--primary:hover { background: var(--primary-dark); color: var(--on-dark); }
.btn--sm { padding: 11px 22px; font-size: 14px; }
.btn--sg { color: var(--sg-ink); background: var(--sg-bg); border: 1px solid var(--sg-border); padding: 13px 24px; }
.btn--sg:hover { background: var(--sg-bg-hover); color: var(--sg-ink); }
.btn--wa { color: var(--wa-ink); background: var(--wa-bg); border: 1px solid var(--wa-border); padding: 13px 24px; }
.btn--wa:hover { background: var(--wa-bg-hover); color: var(--wa-ink); }
.btn--tg { color: var(--tg-ink); background: var(--tg-bg); border: 1px solid var(--tg-border); padding: 13px 24px; }
.btn--tg:hover { background: var(--tg-bg-hover); color: var(--tg-ink); }
.btn--ghost { color: var(--primary); background: var(--panel); padding: 11px 20px; font-size: 13.5px; }
.btn--ghost:hover { background: var(--line); color: var(--primary-dark); }
/* Inline brand logo inside a channel button */
.btn__icon { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 8px; }

.link-arrow {
  font: 600 14px var(--sans);
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 2px;
  text-decoration: none;
  display: inline-block;
}
.link-arrow:hover { text-decoration: none; color: var(--primary-dark); border-color: var(--primary-dark); }

/* --- Header / navigation ------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__logo { width: 56px; height: 56px; display: block; }
.brand__name { font: 700 22px/1.1 var(--serif); color: var(--ink); }
.brand__tag {
  font: 500 10.5px/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
}
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav__link {
  font: 500 14px var(--sans);
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--nav-idle);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { color: var(--primary-dark); text-decoration: none; }
.nav__link.is-active { color: var(--ink); background: var(--nav-active-bg); font-weight: 600; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  text-decoration: none;
}
.icon-btn img { width: 38px; height: 38px; display: block; }
.icon-btn:hover { opacity: .85; text-decoration: none; }
.nav__link + .icon-btn { margin-left: 10px; }
.nav__cta { margin-left: 4px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}

/* --- Home: hero ---------------------------------------------------------- */
.hero { text-align: center; padding: clamp(40px, 7vw, 72px) var(--gutter) 44px; }
.hero__title {
  margin: 0 auto 22px;
  max-width: 20ch;
  font: 600 clamp(36px, 5.5vw, 58px)/1.12 var(--serif);
  text-wrap: balance;
}
.hero__lead {
  margin: 0 auto 30px;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-media { padding: 0 var(--gutter); }
.hero-media img {
  width: 100%;
  height: clamp(240px, 32vw, 400px);
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Split hero: intro left, channel QRs + buttons right */
.hero--split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  text-align: left;
}
.hero--split .hero__title { margin: 0 0 22px; max-width: 20ch; }
.hero--split .hero__lead { margin: 0 0 30px; max-width: 48ch; }
.hero--split .hero__actions { justify-content: flex-start; }

.hero__channels {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.5vw, 30px);
}
.hero__channels-title {
  font: 600 12px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 20px;
  text-align: center;
}
.hero__qr-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hero__channel { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero__channel > img { width: 100%; max-width: 150px; height: auto; border-radius: 8px; background: #fff; }
.hero__channel .btn--sg,
.hero__channel .btn--wa,
.hero__channel .btn--tg { padding: 12px 10px; font-size: 13.5px; }
.hero__channel .btn { width: 100%; text-align: center; box-sizing: border-box; }

@media (max-width: 820px) {
  .hero--split { grid-template-columns: 1fr; text-align: center; }
  .hero--split .hero__title,
  .hero--split .hero__lead { margin-left: auto; margin-right: auto; }
  .hero--split .hero__actions { justify-content: center; }
}
@media (max-width: 480px) {
  .hero__qr-group { grid-template-columns: 1fr; }
  .hero__channel > img { max-width: 200px; }
}

/* --- Home: feature triplet ---------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  padding: 56px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.feature__title { font: 600 24px var(--serif); margin: 0 0 12px; }
.feature p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }

/* --- Split section (image/text + side panel) ---------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 48px;
  align-items: center;
  padding: 56px var(--gutter);
}
.split__body h2 { margin: 0 0 16px; font: 600 34px/1.2 var(--serif); }
.split__body p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.split__body p:last-of-type { margin-bottom: 20px; }
.mini-label {
  font: 600 12px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font: 600 14px var(--sans);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
}

/* --- Cards (machines) ---------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.machine__media,
.machine__ph {
  height: 220px;
  width: 100%;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.machine__media { object-fit: contain; padding: 12px; }
.machine__ph { color: var(--ink-faint); font: 500 13px var(--sans); text-align: center; padding: 0 16px; }
.machine__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.machine__name { font: 600 19px var(--serif); }
.machine__text { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.machine__text p,
.machine__text ul,
.machine__text ol { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.machine__text > * + * { margin-top: 8px; }
.machine__text a { color: var(--primary); text-decoration: underline; }
.machine__price {
  font: 600 13.5px var(--sans);
  color: var(--primary);
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.machine__price-uvp {
  font-weight: 500;
  color: var(--ink-faint);
}

/* Info banner */
.banner {
  margin-top: 36px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
}
.banner p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.banner .btn { white-space: nowrap; }

/* --- Steps (repair service) --------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin-bottom: 48px;
}
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.step__nr {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 16px var(--serif);
  margin-bottom: 14px;
}
.step__title { font: 600 17px var(--serif); margin: 0 0 8px; }
.step p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* --- Tables (termine) ---------------------------------------------------- */
.termine { max-width: 760px; }
.termine h2 { margin: 0 0 8px; font: 600 30px var(--serif); }
.table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.termine__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-faint);
}
.termine__row:first-child,
.termine__row:nth-child(2) { border-top: none; }
.termine__row.is-next { background: var(--panel); }
.termine__date { font: 600 16px var(--serif); }
.termine__wd { font-size: 13.5px; color: var(--ink-soft); }
.termine__status { text-align: right; }

/* --- Badges -------------------------------------------------------------- */
.badge { font: 600 12px var(--sans); border-radius: 999px; padding: 5px 12px; white-space: nowrap; display: inline-block; }
.badge--free { background: var(--wa-bg); color: var(--wa-ink); }
.badge--full { background: var(--warn-bg); color: var(--warn); }
.badge--next { background: var(--primary); color: var(--on-dark); padding: 5px 14px; }

/* --- Courses ------------------------------------------------------------- */
.courses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}
.course {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.course__name { font: 600 21px var(--serif); }
.course__dauer { font: 600 12px var(--sans); color: var(--primary); white-space: nowrap; }
.course__text { font-size: 14px; line-height: 1.65; color: var(--ink-soft); flex: 1; margin: 0; }
.course__hinweis {
  font: 600 12.5px var(--sans);
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 5px 14px;
  align-self: flex-start;
}
.course__kosten {
  font: 600 14px var(--sans);
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

/* --- Flexikurs availability --------------------------------------------- */
.flexi { border-top: 1px solid var(--line); padding-top: 44px; }
.flexi h2 { margin: 0 0 8px; font: 600 32px var(--serif); }
.flexi__intro { font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 70ch; margin: 0 0 22px; }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.tab {
  font: 600 13.5px var(--sans);
  background: var(--panel);
  color: var(--primary);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}
.tab:hover { opacity: .85; }
.tab.is-active { background: var(--primary); color: var(--on-dark); }

.flexi-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 620px; }
.flexi-table__head,
.flexi-row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(110px, 140px) 1fr minmax(120px, 150px);
  align-items: center;
}
.flexi-table__head {
  padding: 12px 22px;
  background: var(--panel);
  font: 600 11.5px var(--sans);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.flexi-row { padding: 13px 22px; border-top: 1px solid var(--line-faint); }
.flexi-row__date { font: 600 15px var(--serif); }
.flexi-row__time { font-size: 13.5px; color: var(--ink-soft); }
.flexi-table__head > :last-child,
.flexi-row > :last-child { text-align: right; }
.slot-panel { display: none; }
.slot-panel.is-active { display: block; }

.seats { display: flex; gap: 6px; }
.seat { width: 24px; height: 24px; border-radius: 50%; }
.seat--free { background: var(--seat-free); }
.seat--taken { background: var(--seat-taken); }

.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-soft); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend__dot { width: 14px; height: 14px; border-radius: 50%; }

.flexi-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 14px;
}
.flexi-actions__buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- About / Contact ----------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 48px;
  align-items: center;
  max-width: 1100px;
}
/* Portrait format: no fixed height, so the image is never cropped and needs
   no letterbox background. max-width keeps it from dominating the column. */
.about__media {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 4px;
}

/* --- Über uns: team portraits ------------------------------------------- */
.team {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  max-width: 1100px;
  margin-top: clamp(40px, 6vw, 72px);
}
.team__member {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
/* Every second person gets the portrait on the right */
.team__member--flipped { grid-template-columns: 1fr minmax(200px, 300px); }
.team__member--flipped .team__photo { order: 2; }
.team__photo {
  width: 100%;
  /* height:auto is required — the width/height attributes on the <img> are
     presentation hints that would otherwise beat aspect-ratio */
  height: auto;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: var(--panel);
}
.team__name { font: 600 28px/1.2 var(--serif); margin: 0 0 14px; }

@media (max-width: 720px) {
  .team__member,
  .team__member--flipped { grid-template-columns: 1fr; }
  .team__member--flipped .team__photo { order: 0; }
  .team__photo { max-width: 300px; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1100px;
}
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.info-card__title { font: 600 22px var(--serif); margin: 0 0 14px; }
.contact-list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hours-table th,
.hours-table td { text-align: left; padding: 9px 12px 9px 0; vertical-align: top; }
.hours-table td:last-child { padding-right: 0; }
.hours-table thead th {
  font: 600 11.5px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  padding-top: 0;
}
.hours-table tbody tr + tr th,
.hours-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.hours-table tbody th { font-weight: 600; color: var(--ink); width: 3.5em; }
.hours-table tbody th abbr { text-decoration: none; }
.hours-table td { color: var(--ink-soft); }
.hours-table__closed { color: var(--ink-faint); }
.hours-table__note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }

/* Narrow cards: stack each day into its own block instead of squeezing 3 columns */
@media (max-width: 480px) {
  .hours-table thead { display: none; }
  .hours-table tbody tr { display: block; padding: 10px 0; }
  .hours-table tbody tr + tr { border-top: 1px solid var(--line-soft); }
  .hours-table tbody th,
  .hours-table tbody td { display: block; width: auto; padding: 0; border: 0; }
  .hours-table tbody tr + tr th,
  .hours-table tbody tr + tr td { border-top: 0; }
  .hours-table tbody td { margin-top: 3px; }
  .hours-table tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--ink);
  }
}

/* --- Channels (dark) + footer ------------------------------------------- */
.channels { background: var(--dark); padding: 56px var(--gutter); }
.channels__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.channels h2 { margin: 0 0 14px; font: 600 32px/1.2 var(--serif); color: var(--on-dark); }
.channels p { font-size: 15px; line-height: 1.7; color: var(--on-dark-soft); margin: 0; }
.qr-group { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.qr { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.qr > img { width: 150px; height: auto; border-radius: 8px; display: block; background: #fff; }
.qr__link {
  font: 600 13.5px var(--sans);
  color: var(--ink);
  background: var(--on-dark);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.qr__link:hover { text-decoration: none; opacity: .9; color: var(--ink); }

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 26px var(--gutter);
  background: var(--dark);
  color: var(--on-dark-soft);
  font-size: 13px;
  border-top: 1px solid var(--dark-line);
}
.site-footer a { color: var(--on-dark-soft); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .site-header.is-open .nav { display: flex; }
  .nav__link { padding: 12px 14px; }
  .nav__link.is-active { background: var(--nav-active-bg); }
  .icon-btn { display: inline-flex; }
  .nav__link + .icon-btn { margin-left: 0; }
  .nav__cta { margin-left: 0; text-align: center; }
  /* Put the two channel buttons + CTA on their own row */
  .nav > .icon-btn { align-self: flex-start; }
}

@media (max-width: 560px) {
  .hero__actions .btn,
  .hero__actions a { width: 100%; text-align: center; }
  .banner { flex-direction: column; align-items: flex-start; }
  .flexi-actions { flex-direction: column; align-items: flex-start; }
}

/* --- Component tweaks ---------------------------------------------------- */
.brand__name, .brand__tag { display: block; }
.text-sm { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 20px; }
.termine .text-sm { margin-bottom: 20px; }
.termine .footnote { margin: 18px 0 0; }
.flexi .footnote { margin-top: 20px; max-width: 75ch; }
.split__body .prose p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.split__body .prose > * + * { margin-top: 12px; }
.narrow { max-width: 760px; }
.legal .prose h2 { margin-top: 32px; }
.legal .prose h3 { margin-top: 24px; }

/* QR codes can't be scanned on the device showing them — hide on phones and
   keep the Signal/WhatsApp/Telegram tap-buttons. Kept last so it wins over the base
   .qr/.hero__channel image rules regardless of source order. */
@media (max-width: 640px) {
  .hero__channel > img,
  .qr > img { display: none !important; }
}