/*
 * wirtli.ch: components of the pages below the homepage (feature pages, /funktionen, /preise, /ueber-uns,
 * /kontakt), loaded after styles.css and only by them. Tokens, fonts, buttons, header, footer, FAQ, CTA band
 * and trust band come from styles.css. Breakpoints: 599 (phone), 859 (small tablet), 1099 (tablet).
 * Markup, variants and rules: docs/seo-website/komponenten.md; every component in seitenvorlage.html.
 * The shared components come first; the rules only one page needs follow at the end, one commented block per
 * page, each with its page prefix (fn-, sk-, ws-, as-, sm-, kt-, pr-, uu-).
 */

/* ---------- page head: crumbs, hero, definition ---------- */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--slate);
}
.crumbs li + li::before {
  content: '›';
  margin: 0 8px;
  color: var(--chalk-muted);
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-hero {
  padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 80px);
  background: linear-gradient(180deg, var(--paper), #fff 75%);
}
.page-hero .crumbs {
  margin-bottom: clamp(24px, 4vw, 44px);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'text media' 'cta media';
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 0 clamp(40px, 5vw, 64px);
}
.page-hero-video .page-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}
.page-hero-text {
  grid-area: text;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.page-hero-media {
  grid-area: media;
}
.page-hero-cta {
  grid-area: cta;
  align-self: start;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.page-hero-cta .btn-lg {
  padding: 0 24px;
}
.page-hero-fine {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--slate);
}
/* Without media (hub, Preise, Kontakt): one column. */
.page-hero-solo .page-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'text' 'cta';
  max-width: 860px;
}
.page-title {
  text-wrap: balance;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.page-hero .lead b {
  color: var(--ink);
}
.pill-mark.t-green,
.pill-mark.t-moss,
.pill-mark.t-slate,
.pill-mark.t-plum,
.pill-mark.t-sand {
  background: var(--t-bg);
  color: var(--t-fg);
}
.pill-mark .i {
  width: 18px;
  height: 18px;
}
/* The sentence an answer engine may quote as it stands (strategie.md 5.1). */
.definition {
  max-width: 720px;
  padding-left: 16px;
  border-left: 3px solid var(--mint);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.section-head-left {
  align-items: flex-start;
  text-align: left;
}
.section-head .definition {
  text-align: left;
}

/* «Auf dieser Seite»: chips under the hero, not sticky. */
.toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 14px;
}
.toc p {
  margin-right: 4px;
  font-weight: 600;
  color: var(--slate);
}
.toc a {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--linen);
  color: var(--ink);
  text-decoration: none;
}
.toc a:hover {
  background: #e9e8e1;
}

/* ---------- text ---------- */

/* Headings break into even lines, paragraphs avoid a lone last word (browsers without it keep the usual break). */
.section-head .h2,
.feature-text .h2,
.feature-text .h3,
.info-card h3,
.cta h2 {
  text-wrap: balance;
}
.lead,
.feature-text > p,
.cta-inner > p,
.info-card p {
  text-wrap: pretty;
}

.prose {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  color: #2e3631;
}
.prose > * + * {
  margin-top: 16px;
}
.prose h3 {
  margin-top: 32px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.prose ul {
  padding-left: 22px;
  list-style: disc;
}
.prose ol {
  padding-left: 22px;
  list-style: decimal;
}
.prose li + li {
  margin-top: 6px;
}
.prose a,
.feature-text p a,
.callout a,
.step-list a {
  font-weight: 500;
  text-underline-offset: 4px;
}
.center {
  margin-inline: auto;
}
/* Space between blocks inside one section (callout and teaser, price card and list, facts and text). */
.flow > * + * {
  margin-top: clamp(40px, 6vw, 64px);
}
/* Keeps a compound like «QR-Code» or a price together instead of breaking after the hyphen. */
.nowrap {
  white-space: nowrap;
}
/* A quiet line under a block (a gallery, cards, a list): the next step, a source or Google's notice. */
.section-note {
  max-width: 760px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--slate);
}
.section-note a {
  font-weight: 500;
  text-underline-offset: 4px;
}

/* ---------- steps: numbered text list (the card steps .steps are in styles.css) ---------- */

.step-list {
  max-width: 760px;
  counter-reset: step;
}
.step-list > li {
  position: relative;
  padding: 0 0 32px 64px;
  counter-increment: step;
}
.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -6px;
  width: 44px;
  font-family: var(--hand);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--green);
}
.step-list > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 8px;
  width: 1px;
  background: var(--smoke);
}
.step-list h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}
.step-list p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}

/* ---------- feature rows: text and picture, alternating ---------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
}
.feature-row + .feature-row,
.table-wrap + .feature-row {
  margin-top: clamp(64px, 9vw, 112px);
}
.feature-row-flip .feature-media {
  order: -1;
}
.feature-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.feature-text > p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
}
.feature-text > p b {
  color: var(--ink);
}
.feature-text .includes {
  font-size: 16px;
}
.feature-text .includes li {
  align-items: flex-start;
}

/* ---------- picture frames ---------- */

/* Desktop screenshot of the app in a quiet browser window. */
.shot-browser {
  overflow: hidden;
  border: 1px solid var(--smoke);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(27, 33, 29, 0.12);
}
.shot-bar {
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ecebe6;
}
.shot-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c9c6be;
}
.shot-url {
  margin-left: 10px;
  padding: 1px 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  color: var(--slate);
}
.shot-browser img,
.shot-phone img,
.shot-paper img {
  display: block;
  width: 100%;
  height: auto;
}
/* Phone screenshot (780 × 1688) in an ink bezel. */
.shot-phone {
  width: min(300px, 100%);
  margin-inline: auto;
  overflow: hidden;
  border: 7px solid var(--ink);
  border-radius: 34px;
  background: var(--ink);
  box-shadow: 0 24px 50px rgba(27, 33, 29, 0.25);
}
.shot-phone img {
  border-radius: 27px;
}
/* Browser and phone together; the phone overlaps the lower right corner. */
.shot-duo {
  position: relative;
  padding: 0 clamp(36px, 7%, 64px) clamp(36px, 7%, 56px) 0;
}
.shot-duo .shot-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  border-width: 5px;
  border-radius: 22px;
}
.shot-duo .shot-phone img {
  border-radius: 17px;
}
/* Print outputs (menu, flyer, stand, notice): the sheet on the table (MARKE.md 8.6.4). */
.shot-paper {
  padding: clamp(20px, 4vw, 40px);
  border-radius: 14px;
  background: var(--table);
}
.shot-paper img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
  margin-inline: auto;
  box-shadow: 0 18px 40px rgba(27, 33, 29, 0.18);
}
.shot-paper-pair {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 28px);
}
.shot-paper-pair img {
  min-width: 0;
  max-height: 460px;
  margin: 0;
}

.figure figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
.figure-center figcaption {
  text-align: center;
}

/* ---------- video: a short clip with poster, pause button and transcript ---------- */

.video-frame {
  position: relative;
  max-width: 400px;
  margin-inline: auto;
}
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: var(--green-deep);
  box-shadow: 0 24px 60px rgba(22, 48, 37, 0.28);
}
.video-frame-wide {
  max-width: none;
}
.video-frame-wide video {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(27, 33, 29, 0.14);
}
.video-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-toggle[hidden] {
  display: none;
}
.video-toggle:hover {
  background: #fff;
}
.video-toggle .i {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke-width: 1.5;
}
.video-frame .i-play,
.video-frame[data-state='paused'] .i-pause {
  display: none;
}
.video-frame[data-state='paused'] .i-play {
  display: block;
}
/* What the clip shows, as text (strategie.md 5.2): answer engines do not watch videos. */
.transcript {
  max-width: 400px;
  margin: 14px auto 0;
  font-size: 14px;
  color: var(--slate);
}
.video-frame-wide + .transcript {
  max-width: none;
}
.transcript summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--green);
}
.transcript summary::-webkit-details-marker {
  display: none;
}
.transcript summary .i {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.transcript[open] summary .i {
  transform: rotate(180deg);
}
.transcript ol,
.transcript p {
  margin-top: 10px;
  line-height: 1.6;
}
.transcript ol {
  padding-left: 20px;
  list-style: decimal;
}

/* ---------- tables ---------- */

/* A table wider than its frame scrolls inside it instead of losing columns (cards below 600 px). */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--smoke);
  border-radius: 14px;
  background: #fff;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.compare-table caption {
  padding: 14px 16px 0;
  font-size: 13px;
  text-align: left;
  color: var(--slate);
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table tbody tr:last-child > * {
  border-bottom: 0;
}
.compare-table thead th {
  background: var(--paper);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}
.compare-table tbody th {
  font-weight: 600;
}
.compare-table .is-wirtli {
  background: var(--green-light);
  color: var(--green);
}
.compare-table thead .is-wirtli {
  background: var(--green);
  color: #fff;
}
.compare-table .tick,
.compare-table .no {
  display: inline-flex;
  margin-right: 6px;
  vertical-align: -6px;
}
.compare-table .no {
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--slate);
}
.compare-table .no .i {
  width: 16px;
  height: 16px;
}
/* A cell that starts with a tick or a cross: the second line starts under the text, not under the icon
   (not on phones, where the column label takes the first line of the cell). */
@media (min-width: 600px) {
  .compare-table td:has(> .tick:first-child),
  .compare-table td:has(> .no:first-child) {
    padding-left: 46px;
    text-indent: -30px;
  }
}
.table-source {
  margin-top: 10px;
  font-size: 13px;
  color: var(--slate);
}
/* Small tablets: tighter cells, so four or five columns fit without scrolling. */
@media (min-width: 600px) and (max-width: 859px) {
  .compare-table {
    font-size: 14px;
  }
  .compare-table th,
  .compare-table td {
    padding: 12px;
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  .compare-table thead th {
    font-size: 16px;
    hyphens: manual;
  }
}
/* On phones every row becomes a card; each cell names its column through data-label. */
@media (max-width: 599px) {
  .table-wrap {
    overflow: visible;
    border: 0;
    background: none;
  }
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
  }
  .compare-table tr {
    overflow: hidden;
    border: 1px solid var(--smoke);
    border-radius: 14px;
    background: #fff;
  }
  .compare-table tr + tr {
    margin-top: 12px;
  }
  .compare-table tbody th {
    background: var(--paper);
    font-family: var(--serif);
    font-size: 18px;
  }
  .compare-table td {
    padding: 10px 16px;
  }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .compare-table td.is-wirtli[data-label]::before {
    color: var(--green);
  }
  .compare-table tbody tr:last-child > * {
    border-bottom: 1px solid var(--line);
  }
  .compare-table tr > :last-child {
    border-bottom: 0;
  }
}

/* ---------- callout: honest limits, notes ---------- */

.callout {
  max-width: 820px;
  padding: 18px 20px;
  border-left: 3px solid var(--green);
  border-radius: 10px;
  background: var(--paper);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.6;
}
.callout > .i {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--green);
}
.callout b {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
}
.callout ul {
  margin-top: 6px;
  padding-left: 18px;
  list-style: disc;
}
/* A callout right after a feature row or a table keeps its distance (page blocks may set their own). */
:where(.feature-row, .table-wrap) + .callout {
  margin-top: clamp(40px, 6vw, 64px);
}
/* On a paper section the callout is a white card, otherwise it would be paper on paper. */
.section-paper .callout {
  background: #fff;
}

/* ---------- badges: the states of the app ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--linen);
  color: var(--slate);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.badge-live {
  background: var(--green-light);
  color: var(--green);
}
.badge-planned {
  background: #e4eaec;
  color: #34525c;
}
.badge-soon {
  border: 1px solid var(--smoke);
  background: #fff;
}
.badge-soon::before {
  display: none;
}

/* ---------- cards ---------- */

/* Hub: the six features, the whole card is the link. */
.tool-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.tool-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--smoke);
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(27, 33, 29, 0.12);
}
.tool-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--table);
}
.tool-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.tool-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.tool-card-body > span:last-child {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.tile-icon-sm {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.tile-icon.tile-icon-sm .i,
.tile-icon-sm svg {
  width: 24px;
  height: 24px;
}

/* «Mehr von Wirtli»: three related features. */
.related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.related-card {
  height: 100%;
  padding: 22px;
  border: 1px solid var(--smoke);
  border-radius: 18px;
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 16px;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.related-card .tile-icon {
  grid-row: span 2;
}
.related-card b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.related-card b .i {
  width: 18px;
  height: 18px;
  color: var(--green);
  transition: transform 0.15s;
}
.related-card > span:last-child {
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(27, 33, 29, 0.12);
}
.related-card:hover b .i {
  transform: translateX(3px);
}

/* Plain cards for lists like «Was Wirtli nicht ist» or the principles. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.info-card {
  padding: 24px;
  border: 1px solid var(--smoke);
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-paper .info-card {
  border-color: transparent;
}
.info-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.info-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}

/* Kontakt: ways to reach us; no form (the CSP has form-action 'none'). */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.contact-card {
  padding: 26px;
  border: 1px solid var(--smoke);
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.contact-card h3 {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}
.contact-card p,
.contact-card address {
  font-size: 15px;
  font-style: normal;
  line-height: 1.55;
  color: var(--slate);
}
.contact-card .btn,
.contact-card .text-link {
  margin-top: auto;
}

/* Facts as label and value («Wirtli in Zahlen und Fakten»). */
.fact-list {
  max-width: 820px;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  border-top: 1px solid var(--smoke);
  font-size: 16px;
  line-height: 1.55;
}
.fact-list dt,
.fact-list dd {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--smoke);
}
.fact-list dt {
  padding-right: 20px;
  font-weight: 600;
}
.fact-list dd {
  color: var(--slate);
}

/* ---------- prices ---------- */

.price-teaser {
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 44px);
  border-radius: 22px;
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 40px;
}
.price-teaser-text {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The amount is ink: `.price-teaser-text p` below would paint it grey like the text. */
.price-teaser-text .price-teaser-amount {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price-teaser-amount small {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
}
.price-teaser-text p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--slate);
}
.price-teaser-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Introductory offer (ends 31.12.2026): always its own block, so it can be deleted as a whole. */
.offer-intro {
  padding: 14px 16px;
  border: 1px solid #ead7d2;
  border-radius: 12px;
  background: #fbf3f1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.5;
}
.offer-intro p {
  color: var(--ink);
}
.offer-intro .chip-wine {
  height: auto;
  min-height: 28px;
  padding-block: 4px;
  line-height: 1.3;
}
/* In the price card the offer block names the training itself: the regular line before it stays hidden until
   the block is deleted, so the yearly plan never says «dazu wählbar: CHF 290.–» and «geschenkt» at once. */
.price-gift:has(+ .offer-intro) {
  display: none;
}
/* «Alles im Abo» in columns, grouped per feature. */
.includes-cols {
  columns: 3 260px;
  column-gap: 40px;
}
.includes-cols > div {
  break-inside: avoid;
  padding-bottom: 28px;
}
/* Two-line group titles keep a heading's leading. */
.includes-cols h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.includes-cols h3 a {
  color: var(--ink);
  text-decoration: none;
}
.includes-cols h3 a:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.includes-cols .includes {
  font-size: 15px;
}
.includes-cols .includes li {
  align-items: flex-start;
}
.section-paper .offer-card {
  box-shadow: 0 18px 44px rgba(27, 33, 29, 0.08);
}

/* ---------- drawn app pieces ---------- */

/* A white card around drawn UI (.rv-* reviews, proposal, menu excerpt): it shows, the text says it. */
.mock-card {
  max-width: 460px;
  margin-inline: auto;
  padding: 18px;
  border: 1px solid var(--smoke);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(27, 33, 29, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
.mock-card .rv-comment,
.mock-card .rv-draft {
  font-size: 14px;
  line-height: 1.5;
}
.mock-card .rv-variant p {
  font-size: 13.5px;
  line-height: 1.45;
}

/* A menu excerpt as the guest sees it on paper. */
.menu-mock {
  max-width: 440px;
  margin-inline: auto;
  padding: 28px 30px 30px;
  border-radius: 4px;
  background: var(--venue-paper);
  box-shadow: 0 18px 40px rgba(27, 33, 29, 0.16);
  font-family: var(--serif);
  color: var(--venue-ink);
}
.menu-mock-title {
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--green);
}
.menu-mock-head {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding-bottom: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--venue-muted);
}
.menu-mock-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 6px;
  font-size: 16px;
  font-weight: 600;
}
.menu-mock-row::after {
  content: '';
  order: 1;
  flex: 1 1 20px;
  border-bottom: 1px dotted var(--chalk-muted);
}
.menu-mock-row > span:first-child {
  min-width: 0;
}
.menu-mock-row small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--venue-muted);
}
.menu-mock-row > :not(:first-child) {
  order: 2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-mock-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--venue-muted);
}
/* The line under a drawn piece («Gezeichnetes Beispiel mit dem erfundenen …»). */
.mock-note,
.figure .mock-note {
  max-width: 600px;
  margin: 14px auto 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--slate);
}

/* Chat with Wirtli as real text (Assistent page): owner on the right, Wirtli with its mark on the left,
   then the «Vorschlag» card. Close to the app and to the drawn chat on the homepage. */
.chat-log {
  max-width: 560px;
  margin-inline: auto;
  padding: 20px;
  border: 1px solid var(--smoke);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(27, 33, 29, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.chat-log > li {
  display: flex;
  flex-direction: column;
}
.chat-owner {
  align-items: flex-end;
}
.chat-owner > p,
.chat-owner > .chat-attach {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 18px 18px 6px 18px;
  background: var(--green);
  color: #fff;
}
.chat-owner > * + * {
  margin-top: 4px;
}
.chat-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.chat-attach .i {
  width: 18px;
  height: 18px;
}
.chat-log > .chat-wirtli {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
.chat-wirtli > p {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--linen);
}
.chat-wirtli .avatar {
  width: 30px;
  height: 30px;
}
.chat-wirtli .avatar svg {
  width: 20px;
  height: 20px;
}
.chat-log > .chat-done {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--slate);
}
.proposal {
  margin-left: 38px;
  padding: 14px;
  border: 1px solid var(--smoke);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(27, 33, 29, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proposal-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.proposal-rows li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.proposal-rows li > .i {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--green);
}
.proposal-rows li > span {
  flex: 1;
}
.proposal-rows .badge {
  margin-left: 6px;
}
.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.proposal-draft {
  font-size: 12.5px;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CTA band on the new pages: the sentence stays at reading width, a fine line instead of the homepage's
   placed hand note, and links in chalk with an underline (green would vanish on the dark ground). */
.cta-inner > p {
  max-width: 640px;
}
.cta-inner > .cta-fine {
  font-size: 14px;
  color: var(--chalk-soft);
}
.on-dark .cta-inner a:not(.btn) {
  color: var(--chalk);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(244, 241, 230, 0.5);
  text-underline-offset: 4px;
}
.on-dark .cta-inner a:not(.btn):hover {
  color: #fff;
  text-decoration-color: currentColor;
}

/* ---------- layout ---------- */

@media (max-width: 1099px) {
  .feature-row {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
    margin-inline: auto;
    gap: 36px;
  }
  .feature-row-flip .feature-media {
    order: 0;
  }
  .tool-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 859px) {
  .page-hero-grid,
  .page-hero-video .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'text' 'media' 'cta';
    grid-template-rows: auto;
  }
  .page-hero-media {
    margin-top: 36px;
  }
  .related,
  .card-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .price-teaser-actions {
    width: 100%;
  }
}
@media (max-width: 599px) {
  .page-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero-cta .btn,
  .price-teaser-actions .btn {
    width: 100%;
  }
  .tool-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-list > li {
    padding-left: 52px;
  }
  .step-list > li::before {
    width: 36px;
    font-size: 38px;
  }
  .step-list > li:not(:last-child)::after {
    left: 17px;
  }
  .fact-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .fact-list dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .fact-list dd {
    padding-top: 2px;
  }
  .chat-log {
    padding: 14px;
  }
  .proposal {
    margin-left: 0;
  }
  .shot-paper-pair img {
    max-height: 300px;
  }
  .section-note {
    text-align: left;
  }
  /* The chip «Einführungsangebot bis 31.12.2026» stays on one line in a card at 360 px. */
  .offer-intro {
    padding: 12px 14px;
  }
  .offer-intro .chip-wine {
    padding-inline: 10px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .related-card,
  .related-card b .i,
  .transcript summary .i {
    transition: none;
  }
  .tool-card:hover,
  .related-card:hover {
    transform: none;
  }
}

/* ==================== rules for one page only ==================== */

/* ==================== /funktionen (prefix fn-) ==================== */

/* Hub cards show device mockups (/bilder/mockups/<feature>.webp from scripts/mockups.mjs), composed for
   the card's 16:10, so centred instead of the top-left crop that suits screenshots. */
#sechs-funktionen .tool-card-media img {
  object-position: 50% 50%;
}
/* «In deinen Farben, deiner Schrift und mit deinem Logo» below the text of the four cards whose outputs
   take colours, fonts and logo from «Restaurant → Identität». The body grows so the line sits at the foot
   of the card and lines up across a row; the text keeps the look `span:last-child` gives it elsewhere. */
#sechs-funktionen .tool-card-body {
  flex: 1;
}
#sechs-funktionen .tool-card-body > span:nth-child(2) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}

/* «So arbeitet Wirtli»: the example below the three steps. */
.fn-example {
  margin-top: clamp(56px, 8vw, 96px);
}

/* «Ausserdem dabei»: a short list in two columns. */
.includes.fn-more {
  display: block;
  max-width: 980px;
  margin-inline: auto;
  columns: 2 340px;
  column-gap: 48px;
}
.fn-more li {
  margin-bottom: 18px;
  break-inside: avoid;
  align-items: flex-start;
}
.fn-more a {
  font-weight: 500;
  text-underline-offset: 4px;
}

/* ==================== /funktionen/speisekarten (prefix sk-); the tinted grounds are tokens with transparency (yellow #f2d06b, wine #7a2b2b) ==================== */

/* drawn review view: «Original» next to «Ergebnis» (stands in for the missing screenshot) */

.sk-review {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--smoke);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(27, 33, 29, 0.12);
  font-size: 13px;
  line-height: 1.4;
}
.sk-review-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
}
.sk-review-head b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
}
.sk-review-head span {
  color: var(--slate);
}
.sk-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.sk-review-col {
  padding: 14px 16px 18px;
}
.sk-review-col + .sk-review-col {
  border-left: 1px solid var(--line);
}
.sk-review-label {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.sk-review-note {
  padding: 14px 14px 16px;
  border-radius: 3px;
  background: var(--venue-paper);
  box-shadow: 0 8px 20px rgba(27, 33, 29, 0.14);
  font-family: var(--hand);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--venue-ink);
  transform: rotate(-1.2deg);
}
.sk-review-note p + p {
  margin-top: 8px;
}
/* The unreadable price on the note: blurred rather than faded, so it still has the ink of the note. */
.sk-review-note .sk-blur {
  filter: blur(2.5px);
}
.sk-review-cat {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}
.sk-review-dish + .sk-review-dish {
  margin-top: 12px;
}
.sk-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 6px;
}
.sk-review-field {
  display: block;
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid var(--smoke);
  border-radius: 7px;
  background: var(--white);
  overflow-wrap: anywhere;
}
.sk-review-row + .sk-review-field,
.sk-review-field + .sk-review-field {
  margin-top: 6px;
}
.sk-review-field.is-likely {
  border-color: var(--yellow);
  background: rgba(242, 208, 107, 0.22);
}
.sk-review-field.is-unsure {
  border-color: rgba(122, 43, 43, 0.45);
  background: rgba(122, 43, 43, 0.07);
  color: var(--wine);
}
.sk-review-field small {
  display: block;
  font-size: 11px;
  color: var(--slate);
}
.sk-review-legend {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--slate);
}
.sk-review-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}
.sk-review-legend .is-likely::before {
  border: 1px solid var(--yellow);
  background: rgba(242, 208, 107, 0.4);
}
.sk-review-legend .is-unsure::before {
  border: 1px solid rgba(122, 43, 43, 0.45);
  background: rgba(122, 43, 43, 0.1);
}

@media (max-width: 599px) {
  .sk-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sk-review-col + .sk-review-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* A line without a draft: it works with «Freigeben» only (assistant.proposal.liveOnly). */
.as-liveonly {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--linen);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--slate);
  white-space: nowrap;
}

/* The arrow at the end of a line opens the draft (assistant.proposal.arrowHint). */
.proposal-rows li > .as-arrow {
  color: var(--slate);
}

/* the picture tile from «Aktuell» (1080 × 1080) */

.sm-tile {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(27, 33, 29, 0.14);
}

/* comparison table: room for the Wirtli column on tablets */

/* ==================== /preise (prefix pr-) ==================== */

/* «Was alles zusammen kostet»: three columns before the price card (alles selbst, mit Profis, mit
   Wirtli), each with its items, the money per year and the time it takes. Wirtli's column is marked. */

.pr-cost {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.pr-cost-col {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--smoke);
  border-radius: 20px;
  background: var(--white);
}
.pr-cost-col h3 {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
}
.pr-cost-mark {
  width: 30px;
  height: 30px;
  color: var(--green);
}
.pr-cost-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-cost-items li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.pr-cost-items li > span {
  color: var(--slate);
}
.pr-cost-items li > b {
  font-weight: 600;
  color: var(--ink);
}
.pr-cost-sum {
  margin: 6px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--linen);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pr-cost-sum > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.pr-cost-sum > b {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
/* Time comes first and stands out: the effort in big type, then the steps of the example. */
.pr-cost-time {
  margin: 0 0 18px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--yellow) 20%, var(--white));
}
.pr-cost-time p {
  margin: 0;
}
.pr-cost-time .pr-cost-effort {
  margin: 2px 0 10px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.pr-cost-steps {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.pr-cost-steps li + li {
  margin-top: 6px;
}
.pr-cost-steps li::marker {
  font-weight: 600;
  color: var(--slate);
}
.pr-cost-wirtli .pr-cost-time {
  background: var(--green-light);
}
.pr-cost-time .pr-cost-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(30, 61, 49, 0.3);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--green);
}
.pr-cost-result span {
  display: block;
  font-family: var(--hand);
  font-size: 24px;
  font-weight: 700;
}
.pr-cost-wirtli .pr-cost-effort {
  color: var(--green);
}
.pr-cost-sum {
  margin-top: auto;
}
.pr-cost-items {
  margin-bottom: 14px;
}
.pr-cost-time .pr-cost-label {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.pr-cost-label .i {
  width: 16px;
  height: 16px;
}
.pr-cost-wirtli {
  border: 2px solid var(--green);
  box-shadow: 0 14px 34px rgba(27, 33, 29, 0.1);
}
.pr-cost-wirtli .pr-cost-sum {
  background: var(--green-light);
}
.pr-cost-wirtli .pr-cost-sum > b {
  color: var(--green);
}
#uebersicht .table-source {
  margin-top: 18px;
  text-align: center;
}
@media (max-width: 1099px) {
  .pr-cost {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
  /* On a phone Wirtli's column comes first, so the comparison starts with the answer. */
  .pr-cost-wirtli {
    order: -1;
  }
}

/* training: the offer card sits on paper, centred in its column */

.pr-offer-card {
  margin-inline: auto;
}

/* «Wir begleiten dich»: five phases on a dashed line, side by side on desktop, a vertical path below.
   Each phase carries a feature colour pair (.t-*) for its icon and its short note. */

.pr-phases {
  position: relative;
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.pr-phases::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 10%;
  right: 10%;
  border-top: 2px dashed var(--smoke);
}
.pr-phase {
  position: relative;
  text-align: center;
}
.pr-phase-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: var(--t-bg);
  color: var(--t-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px var(--white);
}
.pr-phase-icon .i {
  width: 34px;
  height: 34px;
}
.pr-phase-num {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-phase h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.pr-phase p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.pr-phase .pr-phase-meta {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-fg);
}
.pr-phase-offer {
  margin-top: 10px;
}
.pr-phase-offer .chip-wine {
  height: auto;
  min-height: 30px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}
@media (max-width: 1099px) {
  .pr-phases {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 640px;
    margin-inline: auto;
  }
  .pr-phases::before {
    top: 36px;
    bottom: 36px;
    left: 35px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--smoke);
  }
  .pr-phase {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 22px;
    text-align: left;
  }
  .pr-phase-icon {
    grid-row: 1 / span 5;
    margin: 0;
  }
  .pr-phase > :not(.pr-phase-icon) {
    grid-column: 2;
  }
  .pr-phase h3 {
    margin-top: 4px;
  }
}
@media (max-width: 599px) {
  .pr-phases::before {
    left: 27px;
  }
  .pr-phase {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
  }
  .pr-phase-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }
  .pr-phase-icon .i {
    width: 28px;
    height: 28px;
  }
}

/* ==================== /kontakt (prefix kt-) ==================== */

/* hero: the H1 fits one line from 1100 px; cards right below the text */

.kt-hero .page-hero-grid {
  max-width: 980px;
}

.kt-ways {
  margin-top: clamp(32px, 5vw, 52px);
}
/* The cards follow the H1 directly, so their titles are h2 with the look of `.contact-card h3`. */
.kt-card-title {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}
/* The demo is the first way: a green edge marks it. */
.kt-ways .kt-main {
  border-color: var(--green);
  box-shadow: 0 14px 34px rgba(27, 33, 29, 0.08);
}
.kt-ways .offer-intro {
  align-self: stretch;
}
.kt-mail {
  font-size: 17px;
  overflow-wrap: anywhere;
}

/* who answers, and the way for customers: two white cards on paper */

.kt-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.kt-block {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.kt-block p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}
.kt-block > .text-link {
  margin-top: auto;
  padding-top: 4px;
}
.kt-person {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
/* Head and shoulders out of the tall photo, like `.about-photo` on the homepage, only smaller. */
.kt-photo {
  width: 132px;
  height: 168px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--table);
  object-fit: cover;
  object-position: 50% 8%;
}
.kt-person-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* address: same data as the Impressum and the footer */

.kt-narrow {
  max-width: 868px;
}
.kt-address {
  font-style: normal;
}
.kt-address .text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.kt-fine {
  margin-top: 18px;
  font-size: 14px;
  color: var(--slate);
}
.kt-fine a {
  font-weight: 500;
  text-underline-offset: 3px;
}

@media (max-width: 859px) {
  .kt-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 599px) {
  .kt-person {
    flex-direction: column;
    gap: 18px;
  }
  .kt-ways .btn {
    width: 100%;
  }
}

/* ==================== /ueber-uns (prefix uu-) ==================== */

/* hero: photo with sticker, the quote below it */

.uu-title {
  text-wrap: balance;
}

.uu-hero-media {
  justify-self: center;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
}
.uu-hero-media .about-visual {
  margin-left: 22px;
}
.uu-hero-quote {
  margin-top: 0;
  gap: 12px;
}
.uu-hero-quote p {
  font-size: clamp(19px, 1.7vw, 22px);
}
.uu-hero-quote .signature {
  font-size: 36px;
}

/* why: the made-up example venue as a card */

.uu-example {
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--smoke);
  border-radius: 22px;
  background: var(--paper);
}
.uu-example-title {
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}
.uu-example-title small {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--slate);
}
.uu-example .live-list {
  gap: 22px;
}
.uu-example .live-icon {
  background: #fff;
}
.uu-example .live-list h3 {
  font-size: 19px;
}

/* two columns for four items (values, data) */

.card-grid.uu-two {
  max-width: 920px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.live-list.uu-two {
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 48px;
}

/* what Wirtli is, below the cards */

.uu-is {
  margin-top: clamp(32px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.uu-is p {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

/* closing band: the line with the links stays narrow */

.uu-cta-links {
  max-width: 560px;
  line-height: 1.6;
}

@media (max-width: 999px) {
  .uu-hero-media .about-visual {
    margin-left: 0;
  }
  /* the sticker hangs 14 px below the photo */
  .uu-hero-media {
    padding-bottom: 14px;
  }
}
@media (max-width: 859px) {
  .uu-hero-media {
    justify-self: start;
    max-width: 640px;
  }
  .card-grid.uu-two,
  .live-list.uu-two {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Tablet: photo and quote side by side, so the buttons stay close to the text. */
@media (min-width: 600px) and (max-width: 859px) {
  .uu-hero-media {
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }
  .uu-hero-quote {
    flex: 1;
  }
}
@media (max-width: 599px) {
  .uu-is,
  .uu-is p {
    text-align: left;
    align-items: flex-start;
  }
}

/* ==================== /speisekarten: rules of the review of 16.10.2026 (were seiten-speisekarten.css) ==================== */

/*
 * /funktionen/speisekarten (prefix sk-): rules added with the website review of 16.10.2026, to be merged into
 * the page block at the end of seiten.css. Only tokens from styles.css; breakpoints 599 / 859 / 1099 px.
 */

/* «Heute änderst du jeden Preis mehrmals»: a few sentences, so the head is the whole section. */
.sk-problem .section-head {
  margin-bottom: 0;
}

/* «Eine Karte, fünf Orte»: the results in two columns, the print sheet next to the phone, then the two wide
   pictures. Each figure spans two rows of the grid (picture, caption), so in a row the pictures stand on the
   same line and the captions start together. Browsers without subgrid stack picture and caption as usual. */
.sk-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 56px);
}
.sk-results > .figure {
  min-width: 0;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.sk-results > .figure > :first-child {
  align-self: end;
}
.sk-results > .figure:nth-child(n + 3) {
  margin-top: clamp(56px, 7vw, 88px);
}
.sk-results .shot-paper img {
  max-height: 580px;
}
.sk-results figcaption b {
  color: var(--ink);
}
/* The transcript of the clip sits in its caption: full width, the text of an open transcript left-aligned. */
.sk-results .transcript {
  max-width: none;
  margin-top: 10px;
}
.sk-results .transcript p {
  text-align: left;
}

@media (max-width: 859px) {
  .sk-results {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
  .sk-results > .figure:nth-child(n + 2) {
    margin-top: 56px;
  }
}

/* ==================== /website: rules of the review of 16.10.2026 (were seiten-website.css) ==================== */

/*
 * /funktionen/website (prefix ws-): rules added by the review of 16.10.2026, loaded right after
 * seiten.css. To be merged into the page's block in seiten.css. Since then unused there: .ws-moods,
 * .ws-moods-text, .ws-tpl-use.
 */

/* problem: a heading and three sentences, no space left under the head */

.ws-problem .section-head {
  margin-bottom: 0;
}

/* ==================== /social-media: rules of the review of 16.10.2026 (were seiten-social-media.css) ==================== */

/*
 * /funktionen/social-media (prefix sm-): rules added by the review of 16.10.2026, loaded right after
 * seiten.css. To be merged into the page's block in seiten.css. Since then unused there: .sm-mock-label,
 * .sm-mock-hint, .sm-footnote, .sm-soon, .sm-ideas, .sm-compare (.sm-tile is still used).
 */

/* problem: a heading and three sentences, no space left under the head */

.sm-problem .section-head {
  margin-bottom: 0;
}

/* result: the three formats next to the picture from «Aktuell», the overview below in the middle */

.sm-results {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 56px) clamp(32px, 4vw, 48px);
}
.sm-results > .figure {
  min-width: 0;
}
/* the post picture starts at the left edge like its caption (seiten.css centres .sm-tile) */
.sm-results .sm-tile {
  margin-inline: 0;
}
.sm-results-wide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

@media (max-width: 859px) {
  .sm-results {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
    margin-inline: auto;
  }
}

/* ==================== /flyer-aushaenge: rules of the review of 16.10.2026 (were seiten-flyer-aushaenge.css) ==================== */

/* ==================== /funktionen/flyer-aushaenge (prefix fa-) ==================== */
/* Page rules after the review of 16.10.2026 (docs/seo-website/review-umsetzung.md); to be merged into the
   page blocks at the end of seiten.css. */

/* «Bisher»: the problem is text only, so its head needs no gap below. */
.fa-problem .section-head {
  margin-bottom: 0;
}

/* «So geht's»: the two download buttons of step 3 wrap on phones instead of running out of the card. */
.fa-downloads {
  flex-wrap: wrap;
}

/* «Was daraus entsteht»: four outputs as equal tiles on the table (MARKE.md 8.6.4), two per row, one on
   phones. A sheet keeps its proportions inside the tile: `sizes` on the images is at least the tile, so
   max-width and max-height only ever scale them down. */
.fa-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 48px) clamp(20px, 3vw, 40px);
}
.fa-tile {
  height: clamp(300px, 34vw, 440px);
  padding: clamp(20px, 3vw, 36px);
  border-radius: 14px;
  background: var(--table);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fa-tile > img,
.fa-crop {
  box-shadow: 0 18px 40px rgba(27, 33, 29, 0.18);
}
.fa-tile > img {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
/* The review flyer exists only as the preview inside the app screenshot google-flyer.webp (1600 × 1000).
   This window shows just its card (x 954–1350, y 334–892 of the original, A6 proportions); a new screenshot means
   checking these numbers. */
.fa-crop {
  position: relative;
  height: 100%;
  aspect-ratio: 396 / 558;
  overflow: hidden;
}
.fa-crop img {
  position: absolute;
  left: -240.9%;
  top: -59.86%;
  width: 404.04%;
  max-width: none;
  height: auto;
}
@media (max-width: 599px) {
  .fa-results {
    grid-template-columns: minmax(0, 1fr);
  }
  .fa-tile {
    height: clamp(280px, 84vw, 400px);
  }
}

/* ==================== /preise: rules of the review of 16.10.2026 (were seiten-preise.css) ==================== */

/*
 * wirtli.ch /preise: rules added with the website review of 16.10.2026 (docs/seo-website/review-umsetzung.md).
 * Loaded right after seiten.css; the older /preise rules (prefix pr-) stay in seiten.css. To be merged into
 * seiten.css with the other pages at the end.
 */

/* Hero: text left, the price card of the homepage right (only its price half, one column). Below 1100 px
   the card goes under the text, so the H1 never gets squeezed next to it. */
.pr-hero .page-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-areas: 'text media';
  grid-template-rows: auto;
}
.pr-hero .page-hero-text {
  align-self: center;
}
.pr-hero-card {
  grid-template-columns: minmax(0, 1fr);
}
.pr-hero-card .price-main {
  padding: 32px;
  background: var(--white);
}
.pr-hero-list {
  gap: 10px;
  font-size: 15px;
}
@media (max-width: 1099px) {
  .pr-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'text' 'media';
  }
  .pr-hero .page-hero-media {
    margin-top: 36px;
  }
  .pr-hero-card {
    max-width: 560px;
  }
}
@media (max-width: 599px) {
  .pr-hero-card .price-main {
    padding: 28px 22px;
  }
}

/* «Was alles zusammen kostet»: the short Google clause under Wirtli's two steps, and the Kafi line in its
   money box. */
.pr-cost-time .pr-cost-note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--slate);
}
.pr-cost-sum .pr-cost-kafi {
  margin-top: 4px;
  font-family: var(--hand);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green);
}

/* «Was nicht im Abo ist»: four cards, two by two. */
.card-grid.pr-two {
  max-width: 920px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 859px) {
  .card-grid.pr-two {
    grid-template-columns: minmax(0, 1fr);
  }
}