/* css/10-base-typography.css */
/* ---------------------------
   Basis: Schrift, Grundgrößen, Vertikal-Rhythmus, Links, Bilder
   -> nutzt ausschließlich Variablen aus 00-variables.css
--------------------------------*/

/* 1) Grundschrift / Defaults */
html { font-size: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
               Cantarell, "Helvetica Neue", sans-serif !important;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--dunkel);
  margin: 0;
  /* Hintergrund NICHT hier → gehört in 20-layout-containers.css */
}

/* 2) Vertikaler Rhythmus innerhalb des Inhaltsbereichs */
.entry-content > * + * { margin-top: var(--space-4); }

/* 3) Überschriften – neutrale Basis */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  text-align: left;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

/* 4) Fließtext & Listen */
p, ul, ol, dl, blockquote, pre, table, figure { margin: 0; }
ul, ol { padding-left: 1.25rem; }

/* 5) Links – global */
a {
  color: var(--titel);
  text-decoration: none;
}
a:hover,
a:focus {
  opacity: 0.8;
  color: var(--titel);
  text-decoration: none;
  outline: none;
}

/* 6) URLs nicht silbentrennen, aber umbrechen erlauben */
a[href] {
  hyphens: none !important;
  -moz-hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 7) Silbentrennung für Fließtext-Elemente */
p, blockquote, li, td, th {
  hyphens: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* 8) Bilder – responsives Default-Verhalten */
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* 9) Typo-Kleinzeug */
strong, b { font-weight: 700; }
em, i    { font-style: italic; }

/* 10) Barrierearmer Fokus */
:focus-visible {
  outline: 2px dashed var(--marker);
  outline-offset: 2px;
}