/* Hallmark · shape: Service Ledger (one week of the product, then the numbers, the six blocks as an index, the channels, the steps, the questions, the person) · genre: modern-minimal · theme: dose (by request, blue ground, the logo blue as its one signal) · redesign: full · job: hire (quote request, WhatsApp) · hero: Stage (text 5, the week plan 7) · nav: three-part bar (shared chrome, 5 real destinations) · footer: index columns under a mast (shared chrome, a hub with a real sitemap) · signature: one Redaktionswoche of a sample business, four posts approved and the Saturday ad waiting for Freigabe · imagery: product built in hero (2 sample workshop photos as thumbs), founder portrait · posture: restrained, one night band (#prozess) plus the night footer · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a service page reads like any agency; led with the week the client actually approves and the public price instead of claims */
/* Hallmark · reworded hero lead "Wir übernehmen Ihre Kanäle vollständig: Redaktionsplan, Produktion … am Monatsende." to "Wir übernehmen Ihre Kanäle komplett, ab 390 € im Monat pro Kanal." · 58 hero is head, one sentence, actions; each named task lives in its own row of #leistungen-detail */
/* Hallmark · reworded "Sehen wir uns Ihre Kanäle einmal gemeinsam an?" to "Sehen wir uns Ihre Kanäle an?" · section heads six words at most */
/* Hallmark · reworded "Her kanalın kendine ait bir görevi var" to "Her kanalın kendi görevi var" · section heads six words at most */
/* Hallmark · reworded every " – " in copy to a comma, colon or semicolon (Social Ads – Meta & TikTok, Neu im Sortiment – 20 Sek., iki–üç, üç–dört …) · 19 names spaced dashes */
/* Hallmark · reworded the dot-joined plan meta (week and post count, channel and time, the approval footer) into columns and plain sentences · 63 names middle-dot strings */
/* Hallmark · dropped badges "01 – Unsere Hauptleistung", "Leistungen im Detail", "Kanäle", "Ablauf" · 54 eyebrows; the Hauptleistung fact sits on the leistungen.html row */
/* Hallmark · dropped the week-day strip (Mo to So chips) in the plan · each row carries its own day */
/* Hallmark · dropped Material Symbols icon font, the six icon tiles, the 01 to 06 watermark numerals and the brand-colour channel logos · 3, 30b and 48; channels are set in type, icons come from the shared sprite */
/* Hallmark · dropped js/motion.js, js/reveal.js · one IntersectionObserver reveal on section heads replaces both scripts on this page */
/* Hallmark · dropped the inline footer-year script · chrome.js writes the footer year on every page */
/* Hallmark · dropped btn-de, btn-tr, btn-de-footer, btn-tr-footer, sm-ig · the shared chrome buttons carry data-lang-btn and chrome.js syncs aria-pressed; sm-ig was the gradient of the dropped Instagram logo */
/* Hallmark · reworded "Sosyal Medya Reklamları – Meta & TikTok" to "Sosyal Medya Reklamları, Meta ve TikTok" · 19 names the spaced dash in a heading */
/* Hallmark · reworded "Kanallarınıza birlikte bir bakalım mı?" to "Kanallarınıza birlikte bakalım mı?" · section heads six words at most, matched to the shorter German head */
/* Hallmark · answered F4 · the hero, the close and the nav each carry the filled quote button; ad visitors land mid-page and the quote is the one action */
/* Hallmark · added FAQ (3 questions) at the coordinator's request · answers are the owner's published homepage answers word for word, no new fact */

/* ── hero ─────────────────────────────────────────────────── */
.sm-hero { padding-block: var(--space-xl) var(--space-2xl); }
.sm-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - var(--nav-h) - var(--space-xl) - var(--space-2xl)); }
.sm-hero h1 { max-width: 12ch; font-size: clamp(2.75rem, 3.6vw + 1rem, 4.75rem); }
.sm-hero__lead { margin-top: var(--space-lg); max-width: 34ch; }
.sm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.crumb { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; margin-bottom: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.crumb .icon { width: 16px; height: 16px; }
.crumb:hover { color: var(--color-accent); }
.crumb:active { color: var(--color-ink); }
.crumb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* the week: a built sample of the plan the client approves */
.week { margin: 0; }
.week__frame { border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.week__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.week__head strong { font: 700 var(--text-xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.week__sub { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.week__list { margin: 0; padding: 0; list-style: none; }
.week__row { display: grid; grid-template-columns: 72px 64px minmax(0, 1fr) 24px; gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.week__when { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.week__when b { display: block; color: var(--color-ink); font-weight: 500; }
.week__thumb { display: block; width: 64px; height: 64px; border-radius: var(--radius-inner); overflow: hidden; background: var(--color-paper-2); }
.week__thumb img { width: 100%; height: 100%; object-fit: cover; }
.week__row > .week__body:nth-child(2) { grid-column: 2 / 4; }
.week__state { grid-column: 4; }
.week__body { display: grid; gap: var(--space-3xs); min-width: 0; }
.week__kind { justify-self: start; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-inner); background: var(--color-accent-wash); color: var(--color-accent-2); font-size: var(--text-xs); font-weight: 500; line-height: 1.4; }
.week__title { font-weight: 500; line-height: 1.3; }
.week__where { font-size: var(--text-sm); color: var(--color-muted); }
.week__state { display: inline-flex; color: var(--color-ok); }
.week__row--wait { background: var(--color-wait-wash); }
.week__row--wait .week__state { color: var(--color-wait); }
.week__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-lg); }
.week__note { font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 500; }
.week__btns { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.week__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.week__btn--ok { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.week figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ── per channel, every month ─────────────────────────────── */
.sm-month__h { margin-bottom: var(--space-2xl); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.figs > div { padding: var(--space-xl) var(--space-lg); border-left: 1px solid var(--color-rule); }
.figs > div:first-child { border-left: 0; padding-left: 0; }
.figs > div:last-child { padding-right: 0; }
.figs dt { font: 700 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.figs dt small { font-size: var(--text-xl); color: var(--color-ink-2); }
.figs dd { margin: var(--space-sm) 0 0; color: var(--color-ink-2); max-width: 30ch; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.promises li { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.promises h3 { font: 500 var(--text-lg)/1.35 var(--font-body); letter-spacing: 0; }
.promises p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.faq summary h3 { text-wrap: balance; }

/* ── the six blocks, an index ─────────────────────────────── */
.deliver { margin: 0; padding: 0; list-style: none; counter-reset: block; border-top: 1px solid var(--color-rule); }
.deliver > li { counter-increment: block; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.deliver > li::before { content: counter(block); grid-column: 1; font: 700 var(--text-2xl)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.deliver h3 { grid-column: 2 / 5; font-size: var(--text-title); }
.deliver > li > p { grid-column: 5 / 9; color: var(--color-ink-2); }
.deliver ul { grid-column: 9 / 13; display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.deliver ul li { padding-left: var(--space-md); border-left: 1px solid var(--color-muted); line-height: 1.45; }

/* ── channels ─────────────────────────────────────────────── */
.channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.channel { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.channel h3 { font-size: var(--text-2xl); }
.channel > p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.channel dl { margin: var(--space-lg) 0 0; }
.channel dl div { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.channel dt { font-size: var(--text-sm); font-weight: 500; }
.channel dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── process, on the night band ───────────────────────────── */
.sm-night { background: var(--color-night); color: var(--color-night-ink); }
.sm-night .lead { color: var(--color-night-muted); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; display: flex; flex-direction: column; padding-top: var(--space-lg); border-top: 1px solid var(--color-night-rule); }
.steps > li::before { content: counter(step); font: 700 var(--text-3xl)/1 var(--font-display); color: var(--color-night-accent); font-variant-numeric: tabular-nums; margin-bottom: var(--space-lg); }
.steps h3 { color: var(--color-night-ink); }
.steps p { margin-top: var(--space-sm); color: var(--color-night-muted); }
.steps .steps__out { margin-top: auto; padding-top: var(--space-lg); color: var(--color-night-ink); font-size: var(--text-sm); font-weight: 500; }

/* ── close ────────────────────────────────────────────────── */
.sm-close__who { font-size: var(--text-sm); }
#kontakt .founder__photo { grid-column: 2 / 6; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 75rem) {
  .sm-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-xl); }
  .week { max-width: 760px; }
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .deliver > li { grid-template-columns: minmax(0, 1fr); }
  .deliver > li > * , .deliver > li::before { grid-column: 1 / -1; }
  .figs, .promises { grid-template-columns: minmax(0, 1fr); }
  .figs > div { padding: var(--space-lg) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .figs > div:first-child { border-top: 0; }
}
@media (max-width: 40rem) {
  .channels, .steps { grid-template-columns: minmax(0, 1fr); }
  .week__row { grid-template-columns: 48px 48px minmax(0, 1fr) 20px; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
  .week__thumb { width: 48px; height: 48px; }
  .week__head, .week__foot { padding-inline: var(--space-md); }
}