/* ═══════════════════════════════════════════
   BASE – Reset, Grundtypografie, globale Elemente
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 300;
  line-height: var(--line-height);
  color: var(--graphit);
  background-color: var(--base);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--base-alt);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--teal); color: var(--white);
  padding: 0.5rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  z-index: 9999; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* FOKUS-MODUS (blendet Ablenkungen sitewide aus) */
[data-focus-mode="true"] body,
[data-focus-mode="true"] .site-main { background-color: #F5F4F0; }
[data-focus-mode="true"] .sidebar,
[data-focus-mode="true"] .hero-visual,
[data-focus-mode="true"] .site-footer .footer-cols,
[data-focus-mode="true"] .product-strip,
[data-focus-mode="true"] .personal-note-section { display: none !important; }

.focus-mode-banner { display: none; background: var(--sage-light); border-bottom: 2px solid var(--sage); padding: 0.5rem 1.5rem; font-size: 0.82rem; color: var(--sage-dark); text-align: center; }
[data-focus-mode="true"] .focus-mode-banner { display: block; }