/* bedienungsanleitung.html + en/operating-manual.html — document style */
@layer reset, base, components, utilities;

@layer components {

  .manual-outer { padding-block: clamp(20px,3vw,40px) clamp(40px,6vw,80px); background: var(--c-bg) }

  .manual-doc {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(24px,4vw,56px) clamp(24px,5vw,72px);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
  }

  /* Cover */
  .manual-cover { text-align: center; padding-bottom: 28px; border-bottom: 2px solid var(--c-accent); margin-bottom: 32px }
  .manual-cover h1 { font-size: clamp(1.5rem,3.5vw,2.2rem); font-weight: 700; color: var(--c-accent); margin: 0 0 16px; line-height: 1.25 }
  .manual-cover__subtitle { font-size: clamp(1.1rem,2.5vw,1.5rem); font-style: italic; color: var(--c-accent); font-weight: 600; margin: 0 0 24px }
  .manual-cover__img { max-width: 440px; margin: 0 auto 24px; display: block }
  .manual-cover__img img { width: 100%; height: auto; border-radius: var(--radius) }
  .manual-cover__meta { font-size: 13px; color: var(--c-text-muted); text-align: left; margin-top: 8px; line-height: 1.7 }

  /* Table of contents */
  .manual-toc { background: color-mix(in srgb,var(--c-accent) 4%,var(--c-bg)); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 36px }
  .manual-toc__heading { font-size: 15px; font-weight: 700; color: var(--c-accent); margin: 0 0 12px }
  .manual-toc ol { margin: 0; padding: 0 0 0 18px }
  .manual-toc li { margin-bottom: 5px }
  .manual-toc a { color: var(--c-accent); text-decoration: none; font-size: 14px }
  .manual-toc a:hover { text-decoration: underline }
  .manual-toc ol ol { margin: 4px 0 4px 16px }
  .manual-toc ol ol a { font-size: 13px; color: var(--c-text-muted) }

  /* Section headings */
  .manual-doc h2 { font-size: clamp(14.5px,2vw,17px); font-weight: 700; color: var(--c-accent); margin: 36px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--c-border) }
  .manual-doc h3 { font-size: 14px; font-weight: 700; color: var(--c-accent); margin: 20px 0 6px }

  /* Body text */
  .manual-doc p { font-size: 14.5px; line-height: 1.65; color: var(--c-text); margin: 0 0 12px }
  .manual-doc ul, .manual-doc ol.content-list { padding-left: 22px; margin: 0 0 14px }
  .manual-doc ul li, .manual-doc ol.content-list li { font-size: 14.5px; line-height: 1.6; color: var(--c-text); margin-bottom: 4px }
  .manual-doc strong { color: var(--c-text) }

  /* Tables */
  .manual-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 20px }
  .manual-table th { background: var(--c-accent); color: #fff; padding: 8px 12px; text-align: left; font-weight: 600 }
  .manual-table td { padding: 7px 12px; border-bottom: 1px solid var(--c-border); color: var(--c-text) }
  .manual-table tr:nth-child(even) td { background: color-mix(in srgb,var(--c-accent) 4%,var(--c-surface)) }
  .manual-table .tbl-group td { background: color-mix(in srgb,var(--c-accent) 10%,var(--c-surface)); font-weight: 700; color: var(--c-accent); padding-top: 10px }
  .manual-table .tbl-empty td { background: transparent; padding: 4px }

  /* Inline figure pairs (like PDF) */
  .manual-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 20px }
  .manual-figures--single { grid-template-columns: 1fr; max-width: 460px }
  .manual-figures--three { grid-template-columns: 1fr 1fr 1fr }
  @media (max-width: 580px) { .manual-figures, .manual-figures--three { grid-template-columns: 1fr } }
  @media (max-width: 720px) { .manual-figures--three { grid-template-columns: 1fr 1fr } }

  .manual-fig { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden }
  .manual-fig img { display: block; width: 100%; height: auto }
  .manual-fig figcaption { font-size: 12px; color: var(--c-accent); text-align: center; padding: 5px 8px; font-style: italic; line-height: 1.4 }

  /* Notice boxes */
  .manual-warn { border: 1px solid #e84040; background: color-mix(in srgb,#e84040 5%,var(--c-surface)); padding: 10px 14px; font-size: 14px; line-height: 1.55; margin: 12px 0 16px; border-radius: var(--radius); color: var(--c-text) }
  .manual-info { border: 1px solid var(--c-accent); background: color-mix(in srgb,var(--c-accent) 5%,var(--c-surface)); padding: 10px 14px; font-size: 14px; line-height: 1.55; margin: 12px 0 16px; border-radius: var(--radius); color: var(--c-text) }

  /* PDF download */
  .manual-pdf-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--c-text); text-decoration: none; margin-top: 10px; transition: border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out) }
  .manual-pdf-btn:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none }
  .manual-pdf-btn svg { flex-shrink: 0; opacity: .6 }

  /* Back nav */
  .manual-back { padding-block: clamp(20px,3vw,36px) clamp(36px,5vw,64px) }
  .manual-back p { font-size: 14px; color: var(--c-text-muted); max-width: 72ch; line-height: 1.7 }
  .manual-back a { color: var(--c-accent); font-weight: 600 }
  .manual-back a:hover { text-decoration: underline }

}