/* Messanleitung (richtig-messen/) und Messprotokoll. Baut auf site.css auf. */

.m-label { display: flex; align-items: center; gap: 10px; font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.m-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 500 .85rem var(--mono); letter-spacing: 0; color: var(--ink); background: radial-gradient(circle, var(--washi-hot), var(--washi-2)); border: 1px solid rgba(140, 111, 72, .6); flex: none; }
.m-quiet { color: var(--text-muted); max-width: 36rem; }
.m-quiet a, .m-tips a { color: var(--washi-hot); }

button.btn-line { background: transparent; }

/* Zeichnungen auf Papier */
.m-fig { margin: 0; padding: clamp(20px, 3vw, 36px); align-self: start; }
.m-fig svg { width: 100%; height: auto; }
.m-fig figcaption { margin-top: 14px; font-size: .9rem; color: var(--paper-muted); }

/* Kasten Aufmaß und Aufbau */
.m-service-sec { padding: 0 0 clamp(56px, 7vw, 96px); }
.m-service { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); padding: clamp(28px, 4.5vw, 64px); }
.m-service .m-label { color: var(--paper-muted); }
.m-service h2 { margin-top: 16px; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.06; font-weight: 360; color: var(--ink); max-width: 18ch; }
.m-service-lead { margin-top: 20px; color: #3C362E; max-width: 34rem; }
.m-service .btn-row { margin-top: 28px; }
.m-service-facts { display: grid; align-content: start; }
.m-service-facts li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid rgba(140, 111, 72, .4); }
.m-service-facts li:last-child { border-bottom: 1px solid rgba(140, 111, 72, .4); }
.m-service-facts b { font-weight: 520; color: var(--ink); font-size: 1.08rem; }
.m-service-facts span { color: #463F36; font-size: .95rem; }

/* Inhalt */
.m-toc { padding: 0 0 clamp(40px, 5vw, 64px); }
.m-toc ol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; counter-reset: t; }
.m-toc li { counter-increment: t; }
.m-toc a { display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 14px; border: 1px solid var(--rib-dim); text-decoration: none; color: #D6CDBE; font-size: .93rem; transition: border-color 160ms, color 160ms; }
.m-toc a::before { content: counter(t); font: 500 .75rem var(--mono); color: var(--rib); }
.m-toc a:hover { border-color: var(--rib); color: var(--washi-hot); }

/* Werkzeug */
.m-tools { padding: calc(var(--sec-y) * .6) 0; }
.m-tools h2, .m-check-sec h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.06; color: var(--washi-hot); margin-bottom: 24px; }
.m-tools .bullets { color: #D3CABA; }
.m-tools .bullets b { color: var(--washi-hot); }
.m-tools .bullets .link-quiet { font-weight: 520; }

/* Schritte */
.m-step { padding: calc(var(--sec-y) * .75) 0; scroll-margin-top: 24px; }
.m-step-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.m-step h2 { margin-top: 18px; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.06; color: var(--washi-hot); }
.m-step .prose { margin-top: 24px; color: #D3CABA; max-width: 36rem; }
.m-tips { margin-top: 24px; display: grid; max-width: 36rem; }
.m-tips li { padding: 14px 0 14px 22px; border-top: 1px solid var(--rib-dim); color: #C9C0B0; position: relative; }
.m-tips li:last-child { border-bottom: 1px solid var(--rib-dim); }
.m-tips li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 8px; height: 1.5px; background: var(--rib); }
.m-tips b { font-weight: 520; color: var(--washi-hot); }
.m-step .m-quiet { margin-top: 20px; }
.m-fig-wide { margin-top: clamp(40px, 5vw, 64px); }
.m-keys { display: grid; gap: 12px; margin-top: 24px; max-width: 36rem; }
.m-keys p { display: grid; gap: 10px; padding: 24px 28px; background: linear-gradient(180deg, rgba(247, 239, 223, .07), rgba(247, 239, 223, .02)); border: 1px solid var(--rib-dim); color: #DDD4C4; }
.m-example { margin-top: 24px; color: #D3CABA; max-width: 36rem; }
.m-example b { font-weight: 520; color: var(--washi-hot); }
.m-kipp { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rib-dim); color: #D3CABA; }
.m-kipp h3 { font-size: var(--h3); font-weight: 480; color: var(--washi-hot); }
.m-formula { display: grid; gap: 6px; padding: 20px 24px; border-left: 2px solid var(--rib); font: 400 .95rem/1.5 var(--mono); color: #E6DFD2; }
.m-formula span:first-child { font-weight: 500; color: var(--washi-hot); }

/* Stolperfallen */
.m-traps-sec { padding: var(--sec-y) 0; }
.m-traps-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.m-traps-head h2 { font-size: var(--h2); line-height: 1.04; color: var(--washi-hot); }
.m-traps-head p { color: #CFC6B7; max-width: 30rem; }
.m-traps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.m-traps li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 22px 0; border-top: 1px solid var(--rib-dim); }
.m-traps h3 { font-size: 1.15rem; font-weight: 460; color: var(--washi-hot); }
.m-traps p { margin-top: 6px; color: #C9C0B0; font-size: .97rem; }

/* Mess-Rechner */
.m-calc-sec { padding: var(--sec-y) 0; scroll-margin-top: 24px; }
.m-calc-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.m-calc-head h2 { font-size: var(--h2); line-height: 1.04; color: var(--washi-hot); }
.m-calc-head p { color: #CFC6B7; max-width: 32rem; }
.m-calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.m-types { margin-bottom: 28px; }
.m-group { border: 0; padding: 0; margin: 0 0 8px; }
.m-group legend { font-size: .95rem; color: #D6CDBE; margin-bottom: 10px; }
.m-group .field-note { margin: -8px 0 16px; }
.m-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.m-three .field > label { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.m-calc .field input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.m-calc-out { position: sticky; top: 24px; display: grid; gap: 18px; padding: 28px; border: 1px solid var(--rib); background: rgba(247, 239, 223, .04); }
.m-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.m-result div { display: grid; gap: 6px; }
.m-result dt { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.m-result dd { margin: 0; font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--mono); color: var(--washi-hot); font-variant-numeric: tabular-nums; }
.m-result dd small { font-size: .6em; color: var(--text-muted); }
.m-notes { display: grid; gap: 8px; }
.m-notes li { position: relative; padding-left: 20px; font-size: .93rem; color: #CFC6B7; }
.m-notes li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--rib); }
.m-notes li.is-warn { color: #F3C9B9; }
.m-notes li.is-warn::before { background: var(--error); }
.m-notes li.is-ok::before { background: #9FBF8F; }
.m-calc-out .btn { width: 100%; }
.m-calc-out .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.m-small { font-size: .82rem; color: var(--text-muted); }

/* Checkliste */
.m-check-sec { padding: var(--sec-y) 0; }
.m-count { margin-top: 20px; font: 500 1rem var(--mono); color: var(--washi-hot); }
.m-checklist { display: grid; border-top: 1px solid var(--rib-dim); }
.m-checklist li { border-bottom: 1px solid var(--rib-dim); }
.m-checklist .check { padding: 16px 0; font-size: 1rem; }
.m-checklist input:checked + span { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--rib); }

/* Messprotokoll */
.m-proto-page { padding: calc(var(--hero-pad-top) + 8px) 0 var(--sec-y); }
.m-proto-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 860px; margin: 0 auto 24px; }
.m-proto { max-width: 860px; margin: 0 auto; padding: clamp(24px, 4vw, 48px); font-size: .92rem; }
.m-proto-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.m-proto-head img { width: 140px; height: auto; }
.m-proto h1 { font-size: 1.7rem; font-weight: 420; color: var(--ink); }
.m-proto h2 { margin: 22px 0 8px; font-size: 1.05rem; font-weight: 520; color: var(--ink); }
.m-proto-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 16px 0; }
.m-proto-meta p { display: flex; gap: 10px; align-items: flex-end; }
.m-proto-meta span { flex: 1; border-bottom: 1px solid #8C6F48; height: 1.4em; }
.m-proto-typ { grid-column: 1 / -1; flex-wrap: wrap; }
.m-proto i { display: inline-block; width: 13px; height: 13px; border: 1.3px solid var(--ink); vertical-align: -2px; margin: 0 2px 0 10px; }
.m-proto-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; }
.m-proto-sketch p { margin-top: 6px; font-size: .8rem; color: var(--paper-muted); }
.m-proto-table { width: 100%; border-collapse: collapse; color: var(--ink); }
.m-proto-table th, .m-proto-table td { border: 1px solid rgba(140, 111, 72, .55); padding: 0 8px; height: 30px; text-align: left; font-weight: 400; font-size: .85rem; }
.m-proto-table thead th { font: 500 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); height: 26px; background: rgba(140, 111, 72, .08); }
.m-proto-table tbody th { width: 38%; }
.m-proto-calc { margin-top: 18px; }
.m-proto-calc td { font: 400 .8rem var(--mono); color: var(--paper-muted); }
.m-proto-foot { margin-top: 20px; display: grid; gap: 8px; font-size: .85rem; color: #3C362E; }
.m-proto-foot i { margin-left: 0; }

/* Responsiv */
@media (max-width: 1000px) {
  .m-service, .m-step-grid, .m-traps-head, .m-calc-head, .m-calc { grid-template-columns: 1fr; }
  .m-traps { grid-template-columns: 1fr; }
  .m-calc-out { position: static; }
  .m-proto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .m-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
  .m-two { grid-template-columns: 1fr; }
  .m-result dd { font-size: 1.2rem; }
  .m-proto-meta { grid-template-columns: 1fr; }
  .m-proto-table th, .m-proto-table td { padding: 0 5px; font-size: .78rem; }
}

/* Druck: helle Seite, nur Anleitung und Zeichnungen */
@media print {
  @page { size: A4; margin: 11mm 12mm; }
  html, body { background: #fff !important; color: #111 !important; }
  .site-head, .mobile-nav, .site-foot, .finale, .m-toc, .m-calc-sec, .faq, .m-service-sec, .skip,
  .page-shot, .btn, .btn-row, .m-proto-bar { display: none !important; }
  .room, .room-deep, .room-rise, .sheet { background: none !important; box-shadow: none !important; color: #111 !important; }
  .page-hero, .m-step, .m-tools, .m-traps-sec, .m-check-sec, .m-proto-page { padding: 0 0 8mm !important; }
  h1, h2, h3, .m-step h2, .m-tools h2, .m-traps-head h2, .m-check-sec h2, .page-hero h1 { color: #111 !important; }
  p, li, .prose, .lead, .m-tips li, .m-traps p, .bullets, .checklist li, .m-quiet, .m-example, .m-kipp, .m-formula { color: #222 !important; }
  .m-tips b, .bullets b, .m-example b, .m-tips a, .m-quiet a { color: #111 !important; }
  .m-keys p { border-color: #999; background: none; color: #222; }
  .mono-num, .m-count { color: #111 !important; }
  .m-fig { border: 1px solid #bbb; break-inside: avoid; }
  .m-step-grid, .sub-grid { grid-template-columns: 1fr 1fr; gap: 8mm; }
  .m-traps li, .m-checklist li, .m-tips li { break-inside: avoid; border-color: #ccc !important; }
  .m-step, .m-traps-sec { break-before: page; }
  .m-checklist input { accent-color: #111; }
  a, .link-quiet, .m-checklist .check span, .m-formula span, .m-kipp h3 { color: #111 !important; }
  .m-kipp { border-color: #999; }
  .m-count { display: none; }
  .m-checklist input:checked + span { text-decoration: none; color: #222; }
  .js .reveal:not(.is-in) { opacity: 1 !important; transform: none !important; }
  /* Protokoll: eine A4-Seite */
  .m-proto { max-width: none; padding: 0; font-size: 9.5pt; }
  .m-proto-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; gap: 6mm; }
  .m-proto-meta { grid-template-columns: 1fr 1fr !important; margin: 3mm 0; }
  .m-proto-head img { width: 34mm; }
  .m-proto-table th, .m-proto-table td { height: 6.2mm; }
  .m-proto-table thead th { height: 5.4mm; }
  .m-proto-calc { margin-top: 4mm; }
  .m-proto-foot { margin-top: 4mm; font-size: 8.5pt; }
  .m-proto h2 { margin: 4mm 0 2mm; }
}