/* Layout: ruhige Einspalter-Bänder, Leistungen als Liste mit Haarlinien, eine Broschürenseite mit Schnittmarken als einziges Bildmotiv */
:root {
  --paper: #fbfcfc;
  --surface: #ffffff;
  --tint: #eef6f5;
  --ink: #17212b;
  --muted: #55626d;
  --line: #d6e0df;
  --accent: #0e7f78;
  --accent-soft: #dcefec;
  --warm: #e8833a;
  --warm-soft: #fbeadc;
  --bad: #c2412d;
  --mark: #17212b;

  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.9rem, 4.2vw, 2.75rem);

  --wrap: 68rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10161c; --surface: #172029; --tint: #132a2a; --ink: #e5e9ed; --muted: #98a4af;
    --line: #27323c; --accent: #5cc4ba; --accent-soft: #17302f; --mark: #cfd6dc;
    --warm: #f0a062; --warm-soft: #3a2a1d; --bad: #ef7a66;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #10161c; --surface: #172029; --tint: #132a2a; --ink: #e5e9ed; --muted: #98a4af;
  --line: #27323c; --accent: #5cc4ba; --accent-soft: #17302f; --mark: #cfd6dc;
  --warm: #f0a062; --warm-soft: #3a2a1d; --bad: #ef7a66;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-sans);
}
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

.label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Kopf */
.site-head { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; padding-block: 18px;
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.brand strong { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
.brand span { font-size: var(--step--1); color: var(--muted); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.nav a { color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.nav a:hover { color: var(--accent); }

/* Hero */
.hero .wrap {
  display: grid; gap: 48px; padding-block: 64px 72px;
  grid-template-columns: 1fr;
  align-items: center;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sparte, #kontakt { scroll-margin-top: 8px; }

/* Bereichswahl */
.chooser { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .chooser { grid-template-columns: repeat(3, 1fr); } }
.choice {
  --c: var(--accent); --c-soft: var(--accent-soft);
  position: relative; display: grid; gap: 6px; align-content: start;
  padding: 20px 52px 22px 20px; border-radius: 6px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.choice-warm { --c: var(--warm); --c-soft: var(--warm-soft); }
.choice:hover { background: var(--c-soft); border-color: var(--c); transform: translateY(-2px); }
.choice:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.choice-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.choice strong { font-size: var(--step-1); line-height: 1.25; }
.choice-text { color: var(--muted); font-size: 0.95rem; }
.choice-arrow {
  position: absolute; right: 16px; top: 18px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: var(--surface); font-weight: 700;
}

/* Sparten */
.sparte-warm .section-head > .label, .sparte-warm .service .label { color: var(--warm); }
.sparte-warm .trades li { background: var(--surface); }
.sub-head { display: grid; gap: 8px; max-width: 42rem; padding-top: 12px; }
.sub-head h3, .remote-text h3 { font-size: var(--step-1); }
.split { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.3fr 1fr; } }
.split-text { display: grid; gap: 22px; min-width: 0; }
.sheet { margin: 0; }
@media (min-width: 760px) { .services-3 { grid-template-columns: repeat(3, 1fr); column-gap: 36px; } }
.audiences:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
@media (min-width: 760px) { .audiences:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } }
.remote { padding-top: 12px; }
.hero-text { display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: var(--step-3); max-width: 18ch; }
.hero .lead { font-size: var(--step-1); color: var(--muted); max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 11px 20px; border-radius: 4px;
  font-weight: 600; text-decoration: none; border: 1px solid var(--accent);
}
.btn-primary { background: var(--accent); color: var(--surface); }
.btn-secondary { color: var(--accent); background: transparent; }
.btn:hover { filter: brightness(1.08); }

/* Broschürenseite mit Schnittmarken */
.sheet { position: relative; padding: 26px; justify-self: center; width: min(100%, 340px); }
.sheet-page {
  aspect-ratio: 210 / 297; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; grid-template-rows: 46% auto 1fr; overflow: hidden;
}
.sheet-img {
  background:
    linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--accent) 22%, transparent) 62%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent) 35%, var(--accent-soft)));
}
.sheet-body { padding: 14px 16px 0; display: grid; gap: 6px; }
.sheet-body b { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sheet-body i { display: block; height: 6px; border-radius: 1px; background: var(--line); font-style: normal; }
.sheet-body i:nth-child(3) { width: 88%; } .sheet-body i:nth-child(4) { width: 72%; }
.sheet-grid { padding: 12px 16px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-grid span { background: var(--accent-soft); border: 1px solid var(--line); }
.crop { position: absolute; width: 18px; height: 18px; border-color: var(--mark); border-style: solid; border-width: 0; }
.crop.tl { top: 6px; left: 6px; border-right-width: 1px; border-bottom-width: 1px; }
.crop.tr { top: 6px; right: 6px; border-left-width: 1px; border-bottom-width: 1px; }
.crop.bl { bottom: 6px; left: 6px; border-right-width: 1px; border-top-width: 1px; }
.crop.br { bottom: 6px; right: 6px; border-left-width: 1px; border-top-width: 1px; }
.sheet-spec {
  margin-top: 10px; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em;
}

/* Sektionen */
.band { border-top: 1px solid var(--line); }
.band .wrap { padding-block: 64px; display: grid; gap: 36px; }
.band-alt { background: var(--tint); }
.hero { background: linear-gradient(180deg, var(--surface), var(--tint)); }
.audience:nth-child(2) { border-top-color: var(--warm); }

/* Vorher / Nachher Briefbogen */
.compare { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.tag {
  justify-self: start; font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px;
}
.tag-bad { background: var(--warm-soft); color: var(--bad); }
.tag-good { background: var(--accent-soft); color: var(--accent); }
.letter {
  container-type: inline-size; position: relative; width: 100%; max-width: 380px;
  aspect-ratio: 210 / 297; background: #fff; color: #222;
  border: 1px solid var(--line); box-shadow: 0 10px 28px -18px rgba(20, 40, 45, .45);
  overflow: hidden; justify-self: center;
}
.letter > * { position: absolute; margin: 0; }
.letter .stack { display: grid; gap: calc(100cqw / 210 * 3); }
.lt { font-size: calc(100cqw / 210 * 3.4); line-height: 1.35; }
.bar { background: #d9d9d9; height: calc(100cqw / 210 * 1.6); border-radius: 1px; }

/* Vorher */
.v-head { top: 4%; left: 0; right: 0; text-align: center; font-family: "Times New Roman", Times, serif;
  font-size: calc(100cqw / 210 * 9); font-weight: 700; color: #1d3fbf; letter-spacing: .02em; }
.v-sub { top: 10.5%; left: 0; right: 0; text-align: center; font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: calc(100cqw / 210 * 4.2); color: #c2185b; }
.v-rule { top: 14%; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, #e53935, #fdd835, #43a047); }
.v-addr { top: 19%; left: 52%; font-family: Arial, sans-serif; }
.v-date { top: 17%; left: 10%; font-family: "Courier New", monospace; }
.v-bank { top: 31%; left: 10%; font-family: Arial, sans-serif; color: #777; }
.v-body { left: 10%; right: 10%; }
.v-foot { bottom: 3%; left: 0; right: 0; text-align: center; font-family: "Times New Roman", serif; font-style: italic; color: #1d3fbf; }

/* Nachher: DIN 5008 Form B, Maße in mm */
.n-logo { top: calc(100cqw / 210 * 14); left: calc(100cqw / 210 * 25); width: calc(100cqw / 210 * 10);
  height: calc(100cqw / 210 * 10); border-radius: 2px; background: var(--accent); }
.n-name { top: calc(100cqw / 210 * 13.5); left: calc(100cqw / 210 * 38); font-family: var(--font-sans);
  font-size: calc(100cqw / 210 * 6); font-weight: 650; color: #1b2a33; }
.n-claim { top: calc(100cqw / 210 * 21.5); left: calc(100cqw / 210 * 38); font-family: var(--font-sans);
  font-size: calc(100cqw / 210 * 3.2); color: #6b7780; letter-spacing: .04em; }
.n-field { top: calc(100cqw / 210 * 45); left: calc(100cqw / 210 * 20); width: calc(100cqw / 210 * 85);
  height: calc(100cqw / 210 * 45); outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.n-return { top: calc(100cqw / 210 * 48); left: calc(100cqw / 210 * 25); font-family: var(--font-sans);
  font-size: calc(100cqw / 210 * 2.3); color: #6b7780; text-decoration: underline; }
.n-addr { top: calc(100cqw / 210 * 63); left: calc(100cqw / 210 * 25); font-family: var(--font-sans); }
.n-info { top: calc(100cqw / 210 * 50); left: calc(100cqw / 210 * 125); font-family: var(--font-sans); color: #4b5760; }
.n-body { left: calc(100cqw / 210 * 25); right: calc(100cqw / 210 * 20); }
.n-fold { left: 0; width: calc(100cqw / 210 * 6); height: 1px; background: #8a959c; }
.n-hole { top: calc(100cqw / 210 * 148.5); left: 0; width: calc(100cqw / 210 * 8); height: 1px; background: #8a959c; }
.n-foot { bottom: calc(100cqw / 210 * 8); left: calc(100cqw / 210 * 25); right: calc(100cqw / 210 * 20);
  border-top: 1px solid var(--accent); padding-top: calc(100cqw / 210 * 2.5);
  display: flex; justify-content: space-between; gap: 4px; font-family: var(--font-sans); color: #6b7780; }
.n-foot span { position: static; }
.pin {
  width: calc(100cqw / 210 * 9); height: calc(100cqw / 210 * 9); border-radius: 50%;
  display: grid; place-items: center; font: 700 calc(100cqw / 210 * 5) / 1 var(--font-sans);
  color: #fff; z-index: 2;
}
.pin-good { background: var(--accent); }
.pin-bad { background: var(--bad); }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notes li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 10px; align-items: start; font-size: 0.95rem; }
.notes li > b {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; color: #fff;
}
.notes-bad li > b { background: var(--bad); }
.notes-good li > b { background: var(--accent); }
.notes span { color: var(--muted); }
.section-head { display: grid; gap: 10px; max-width: 42rem; }
.section-head h2 { font-size: var(--step-2); }
.section-head p { color: var(--muted); }

/* Leistungen */
.services { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .services { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.service { display: grid; gap: 8px; padding-block: 26px; border-bottom: 1px solid var(--line); min-width: 0; align-content: start; }
.service h3 { font-size: var(--step-1); }
.service p { color: var(--muted); max-width: 32rem; }
.service .label { color: var(--accent); }
.service-wide { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .service-wide { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .service-wide > .label, .service-wide > h3 { grid-column: 1; }
  .service-wide > p { grid-column: 1; }
  .service-wide > .trades { grid-column: 2; grid-row: 1 / span 3; }
}
.trades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.trades li {
  font-size: 0.9rem; padding: 5px 11px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--paper);
}

/* Zielgruppen */
.audiences { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .audiences { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.audience { display: grid; gap: 8px; align-content: start; border-top: 2px solid var(--accent); padding-top: 16px; }
.audience h3 { font-size: var(--step-1); }
.audience p { color: var(--muted); }

/* Fernhilfe */
.remote { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .remote { grid-template-columns: 1fr 1.2fr; } }
.remote-text { display: grid; gap: 14px; align-content: start; min-width: 0; }
.remote-text p { color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; gap: 12px;
  padding-block: 14px; border-bottom: 1px solid var(--line);
}
.steps li:first-child { border-top: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); color: var(--accent); font-size: 0.9rem; padding-top: 2px;
}
.steps strong { display: block; }
.steps span { color: var(--muted); font-size: 0.95rem; }

/* Kontakt */
.contact { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact { grid-template-columns: repeat(3, 1fr); } }
.contact div { display: grid; gap: 4px; align-content: start; }
.contact .value { font-size: var(--step-1); font-weight: 600; overflow-wrap: anywhere; }
.tbd { color: var(--muted); font-style: italic; font-weight: 400; }

/* Fuß */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); }
.site-foot .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding-block: 26px; font-size: 0.9rem; color: var(--muted);
}
.site-foot nav { display: flex; gap: 20px; }
.site-foot a { color: var(--muted); }

/* Rechtstexte */
.legal .wrap { padding-block: 56px 72px; }
.legal article { max-width: 44rem; display: grid; gap: 14px; }
.legal h1 { font-size: var(--step-3); margin-bottom: 12px; }
.legal h2 { font-size: var(--step-1); margin-top: 22px; }
.legal p, .legal li { color: var(--ink); }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.legal .note {
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 14px; font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.site-foot p { line-height: 1.7; }
.site-foot nav { align-self: flex-start; }