/* Shared reading rhythm. Loaded after each example's individual design. */
body.demo-site {
  --demo-gutter: clamp(20px, 4vw, 64px);
  --demo-content: 1280px;
  --demo-inset: max(var(--demo-gutter), calc((100% - var(--demo-content)) / 2));
  --demo-h1: clamp(36px, 4.6vw, 64px);
  --demo-h2: clamp(30px, 3.2vw, 44px);
  --demo-h3: clamp(22px, 2vw, 26px);
  --demo-body: 17px;
  --demo-meta: 14px;
  --demo-small: 13px;
  --space: clamp(48px, 6vw, 80px);
  --gutter: var(--demo-gutter);
  --pad: var(--demo-gutter);
  font-size: var(--demo-body);
  line-height: 1.7;
}

/* The same text role has the same size, while typefaces remain brand-specific. */
body.demo-site main h1 {
  font-size: var(--demo-h1);
  line-height: 1.12;
  letter-spacing: -.04em;
  overflow-wrap: normal;
}
body.demo-site main h2 {
  font-size: var(--demo-h2);
  line-height: 1.18;
  letter-spacing: -.025em;
}
body.demo-site main h3 {
  font-size: var(--demo-h3);
  line-height: 1.3;
  letter-spacing: -.015em;
}
body.demo-site main p {
  font-size: var(--demo-body);
  line-height: 1.7;
}
body.demo-site main :is(.service-body, .service-card, .s-card, .a-considerations, .kw-service, .kw-list-sheet) li {
  font-size: var(--demo-body);
  line-height: 1.65;
}
body.demo-site main :is(.studio-visual, .br-motion, .principle) > p {
  font-size: var(--demo-h2);
  line-height: 1.2;
}
body.demo-site main :is(.kicker, .eyebrow, .br-kicker, .s-label, .a-label, .kw-kicker) {
  font-size: var(--demo-meta);
  line-height: 1.6;
  letter-spacing: .055em;
  max-width: 100%;
}
body.demo-site main :is(.kicker, .eyebrow, .br-kicker, .s-label, .a-label, .kw-kicker) + :is(h1, h2) {
  margin-top: 20px;
}
body.demo-site main :is(h2, h3) + p {
  margin-top: 16px;
}
body.demo-site main :is(.section-head, .s-head, .a-heading, .kw-heading, .br-visit-head) {
  margin-bottom: 40px;
}
body.demo-site main :is(.faq, .questions, .br-faq, .s-faq, .a-faq, .kw-faq) summary {
  font-size: var(--demo-body);
  line-height: 1.6;
}
body.demo-site main :is(.service-intro, .care-options summary) {
  font-size: var(--demo-body);
  line-height: 1.6;
  letter-spacing: normal;
}

/* Notes must remain readable rather than shrinking with decorative layouts. */
body.demo-site :is(small, figcaption, .demo-bar, .demo-bar > span) {
  font-size: var(--demo-small);
  line-height: 1.6;
}
body.demo-site main :is(.hero-foot, .hero-footer, .hero-bottom, .hero-note,
  .s-hero-bottom, .a-hero-link, .kw-small-link, .palette-note, .season-note,
  .material-note, .hero-bottom > span, .br-orientation > span, .br-orientation b,
  .process-note, .room-label, .room figcaption strong, .room figcaption small,
  .architecture figcaption, .architecture figcaption > span,
  .br-hero-visual figcaption, .br-hero-visual figcaption > span,
  .s-diagram figcaption strong, .s-diagram figcaption span,
  .a-image-caption span, .a-image-caption small,
  .a-plan figcaption, .a-plan figcaption span,
  .kw-art-caption, .kw-art-caption > span, .kw-sheet-top > span,
  .service-top > span, .card-top > span, .help-card > span,
  .material-top > span, .service > span, .studio-visual > span,
  .work-details summary > span:first-child, .service summary > span:first-child) {
  font-size: var(--demo-small);
  line-height: 1.6;
  letter-spacing: .025em;
}
body.demo-site main .br-hero-note {
  font-size: var(--demo-small) !important;
  line-height: 1.6;
}
body.demo-site main :is(.steps, .s-steps, .br-steps, .a-how ol, .kw-process, .process-grid, .visit-grid) li > span,
body.demo-site main .steps article > span {
  font-size: var(--demo-meta);
  line-height: 1.5;
}
body.demo-site main .a-considerations span {
  font-size: var(--demo-meta);
  line-height: 1.5;
}
body.demo-site main .card-top > span { opacity: 1; }
body.demo-site .s-diagram svg text {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  fill: #e3e9f3;
}
body.demo-site .a-plan svg text {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  fill: #36517d;
}
body.demo-site main .s-card li {
  font-size: var(--demo-meta);
  line-height: 1.5;
}
body.demo-site footer,
body.demo-site footer :is(p, small, span),
body.demo-site footer > a:not([class]) {
  font-size: var(--demo-small);
  line-height: 1.7;
}
body.demo-site footer :is(.w-logo, .sl-logo, .br-logo, .s-brand, .a-brand),
body.demo-site footer .kw-logo {
  font-size: 24px;
  line-height: 1.2;
}
body.demo-site .w-logo small {
  font-size: var(--demo-small);
  line-height: 1.5;
  letter-spacing: .07em;
}

/* Centred button contents and comfortable labels, including narrow screens. */
body.demo-site :is(.button, .br-button, .sl-button, .s-button, .a-button, .kw-button) {
  min-height: 52px;
  justify-content: center;
  gap: 16px;
  padding: 14px 22px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
}
body.demo-site :is(.button, .br-button, .sl-button, .s-button, .a-button, .kw-button) > span[aria-hidden="true"] {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
body.demo-site main :is(.w-link, .text-link),
body.demo-site :is(.nav, .w-nav, .br-nav, .sl-nav, .s-nav, .a-nav, .kw-nav) nav a {
  font-size: 16px;
  line-height: 1.5;
}
body.demo-site main :is(.service-card, .help-card, .br-care-item, .a-service) a,
body.demo-site main :is(.service-links, .chapter-nav, .s-jump, .a-under-hero, .kw-ticker) a,
body.demo-site main .kw-list-sheet > a {
  font-size: 15px;
  line-height: 1.6;
}
body.demo-site .demo-bar a {
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
}

/* Symmetrical content boundaries without clipping full-width backgrounds. */
body.demo-site .wrap {
  width: calc(100% - 2 * var(--demo-gutter));
  max-width: var(--demo-content);
  margin-inline: auto;
  padding-inline: 0;
}
body.demo-site :is(.s-shell, .a-shell, .kw-shell) {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
body.demo-site :is(.s-nav, .s-services, .s-approach, .s-faq, .s-contact, .s-footer,
  .a-nav, .a-hero, .a-services, .a-planning, .a-how, .a-faq, .a-contact, .a-footer,
  .kw-nav, .kw-hero, .kw-work, .kw-list-section, .kw-method, .kw-faq, .kw-contact, .kw-footer) {
  padding-inline: var(--demo-inset);
}
body.demo-site .s-hero {
  padding-inline: max(0px, calc((100% - var(--demo-content) - 2 * var(--demo-gutter)) / 2));
}
body.demo-site .s-hero-copy {
  padding-left: var(--demo-gutter);
}
body.demo-site .s-jump,
body.demo-site .kw-ticker {
  padding-inline: var(--demo-inset);
}
body.demo-site .a-under-hero {
  width: calc(100% - 2 * var(--demo-gutter));
  max-width: var(--demo-content);
  margin-inline: auto;
}
body.demo-site[data-demo="gartenpflege"] .nav {
  width: 100%;
  max-width: none;
  padding-inline: var(--demo-inset);
}
body.demo-site[data-demo="coiffeur"] .sl-hero {
  max-width: none;
  padding-inline: max(0px, calc((100% - var(--demo-content) - 2 * var(--demo-gutter)) / 2));
  background: var(--lilac);
}
body.demo-site[data-demo="coiffeur"] .chapter-nav {
  max-width: none;
  padding-inline: var(--demo-inset);
}
body.demo-site[data-demo="coiffeur"] .chapter-nav a {
  padding-inline: 20px;
}
body.demo-site[data-demo="reinigung"] .contact,
body.demo-site[data-demo="physiotherapie"] .br-contact {
  padding: clamp(28px, 4.5vw, 64px);
}

/* An intentional centred closing section stays centred as the type grows. */
body.demo-site[data-demo="maler"] .contact :is(h2, p, small),
body.demo-site[data-demo="gartenpflege"] .contact :is(h2, p, small),
body.demo-site[data-demo="coiffeur"] .contact :is(h2, p, small) {
  margin-inline: auto;
  text-align: center;
}
body.demo-site[data-demo="maler"] .contact h2,
body.demo-site[data-demo="gartenpflege"] .contact h2,
body.demo-site[data-demo="coiffeur"] .contact h2 {
  max-width: 24ch;
}
body.demo-site main :is(.service-grid, .service-card, .service, .help-grid, .help-card,
  .section-head, .hero-head, .hero-heading, .process-grid, .process, .faq,
  .s-head, .s-card, .s-jump, .a-heading, .a-service, .kw-service,
  .br-care-item, .br-care, .br-faq, .contact, .br-contact, .a-contact, .s-contact, .kw-contact) > * {
  min-width: 0;
}

/* Contrast repairs inside the existing palettes. */
body.demo-site[data-demo="maler"] .colour-rail span:nth-child(2) { background: #934f39; }
body.demo-site[data-demo="maler"] .colour-rail span:nth-child(3),
body.demo-site[data-demo="maler"] .palette-card:nth-child(2) { background: #536548; }
body.demo-site[data-demo="maler"] .palette-card:nth-child(3) { background: #914e36; }
body.demo-site[data-demo="maler"] .colour-rail span,
body.demo-site[data-demo="maler"] .colour-rail small { font-size: var(--demo-small); line-height: 1.5; }
body.demo-site[data-demo="schreinerei"] .intro h2 em { color: #805936; }
body.demo-site[data-demo="schreinerei"] .work-details summary > span:first-child { color: #765236; }
body.demo-site[data-demo="kammerjaeger"] .help-card > span { color: #795547; }
body.demo-site[data-demo="kammerjaeger"] .step > span { color: #795547; }
body.demo-site[data-demo="physiotherapie"] .br-orientation b { color: #536b58; }
body.demo-site[data-demo="handwerker"] .kw-hero h1 { max-width: none; }
body.demo-site[data-demo="handwerker"] .kw-hero h1 span { color: var(--coal); -webkit-text-stroke: 0; }
body.demo-site[data-demo="handwerker"] .kw-service-number { color: #646655; }
body.demo-site[data-demo="reinigung"] .room-label { left: 20px; right: 20px; text-align: center; }

@media (max-width: 900px) {
  body.demo-site[data-demo="reinigung"] .service-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  body.demo-site :is(.nav, .w-nav, .br-nav, .sl-nav, .s-nav, .a-nav, .kw-nav) nav a:not(:last-child) { display: none; }
  body.demo-site main :is(.section-head, .s-head, .a-heading, .kw-heading, .br-visit-head) { margin-bottom: 32px; }
  body.demo-site .s-diagram-top { flex-wrap: wrap; gap: 8px 16px; }
  body.demo-site .s-diagram figcaption,
  body.demo-site .a-plan figcaption { flex-wrap: wrap; gap: 8px 18px; }
}
@media (max-width: 700px) {
  body.demo-site[data-demo="maler"] .hero-visual { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.demo-site[data-demo="maler"] .colour-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
  body.demo-site[data-demo="maler"] .colour-rail span { padding: 12px; min-height: 82px; }
  body.demo-site[data-demo="coiffeur"] .chapter-nav { padding-inline: var(--demo-gutter); }
  body.demo-site[data-demo="coiffeur"] .chapter-nav a { padding-inline: 12px; }
  body.demo-site[data-demo="reinigung"] .service-links { grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
  body.demo-site[data-demo="reinigung"] .service-links a { padding-block: 12px; }
  body.demo-site[data-demo="reinigung"] .service-links a:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  body.demo-site .a-image-caption { flex-direction: column; align-items: flex-start; gap: 8px; }
  body.demo-site .a-image-caption small { text-align: left; max-width: none; }
  body.demo-site .hero-footer { flex-wrap: wrap; }
  body.demo-site .hero-footer span { max-width: none; }
  body.demo-site .hero-footer span:last-child { text-align: left; }
  body.demo-site .hero-foot { flex-wrap: wrap; }
  body.demo-site .hero-foot span, body.demo-site .hero-foot a { max-width: none; text-align: left; }
  body.demo-site .kw-sheet-top { flex-wrap: wrap; gap: 12px; }
  body.demo-site .kw-art-caption { font-size: var(--demo-small); }
}
@media (max-width: 520px) {
  body.demo-site :is(.nav, .w-nav, .br-nav, .sl-nav, .s-nav, .a-nav, .kw-nav) {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 22px;
  }
  body.demo-site :is(.nav, .w-nav, .br-nav, .sl-nav, .s-nav, .a-nav, .kw-nav) nav {
    justify-content: center;
    max-width: 100%;
  }
  body.demo-site :is(.nav, .w-nav, .br-nav, .sl-nav, .s-nav, .a-nav, .kw-nav) nav a:last-child {
    text-align: center;
    padding-inline: 16px;
  }
  body.demo-site .w-logo { text-align: center; }
  body.demo-site .demo-bar { justify-content: center; text-align: center; }
  body.demo-site .demo-bar > span { text-align: center; }
  body.demo-site .demo-bar a:last-child { margin-left: 0; }
  body.demo-site[data-demo="coiffeur"] .chapter-nav { grid-template-columns: 1fr; }
  body.demo-site[data-demo="coiffeur"] .chapter-nav a { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  body.demo-site[data-demo="coiffeur"] .chapter-nav a:last-child { border-bottom: 0; }
  body.demo-site .kw-ticker { padding-inline: var(--demo-gutter); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.demo-site .kw-ticker a {
    min-width: 0;
    padding: 14px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  body.demo-site .kw-ticker a:first-child { padding-left: 0; }
  body.demo-site .kw-ticker a:last-child { padding-right: 0; }
  body.demo-site .s-jump { padding-inline: 0; }
  body.demo-site .s-jump a { padding-inline: var(--demo-gutter); }
  body.demo-site .room figcaption { right: 16px; }
  body.demo-site .br-hero-visual figcaption { gap: 12px; }
  body.demo-site .br-orientation { grid-template-columns: 1fr; gap: 14px; }
  body.demo-site .br-orientation span { display: flex; align-items: baseline; gap: 14px; }
  body.demo-site .br-orientation b { margin-bottom: 0; }
  body.demo-site main :is(.button, .br-button, .sl-button, .s-button, .a-button, .kw-button) {
    width: 100%;
    padding-inline: 18px;
    gap: 12px;
  }
  body.demo-site main :is(.s-contact, .a-contact, .kw-contact) { padding-block: var(--space); }
}
@media (max-width: 600px) { body.demo-site { --demo-body: 16px; } }