/* ===================================================================
 * seite.css - eigene Anpassungen für aerztehaus-software.de
 * Das Theme dayshift (theme.css) bleibt unverändert. Hier steht nur,
 * was diese Seite zusätzlich braucht. Farben ausschließlich über die
 * Variablen des Themes, kein zweiter Akzent.
 * ================================================================== */

/* Das Bild im Aufmacher behält sein Seitenverhältnis. */
.mk-hero-img { height: auto; }

/* ===== Sprungmarke zum Inhalt =====================================
 * Unsichtbar, bis sie den Tastaturfokus bekommt. */
.mk-skip {
  position: absolute;
  left: var(--gutter);
  top: -6rem;
  z-index: 100;
  background: var(--anthracite);
  color: var(--on-dark);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: var(--s2) var(--s4);
  font-weight: 500;
}
.mk-skip:focus { top: var(--s2); }

/* ===== Navigation =================================================
 * Neun Punkte passen nicht neben das Wortzeichen. Auf breiten
 * Bildschirmen steht die Navigation deshalb in einer eigenen Zeile
 * unter dem Wortzeichen; unter 901px klappt sie wie im Theme auf. */
@media (min-width: 901px) {
  .mk-header-inner { flex-wrap: wrap; row-gap: var(--s2); }
  .mk-nav { width: 100%; gap: var(--s1) var(--s5); }
  .mk-nav a { font-size: 0.94rem; }
}

/* ===== Aufmacher ohne Bild ======================================== */
.mk-hero-text { max-width: 46rem; }
.mk-hero-text h1 { max-width: 20ch; }

/* ===== Fließtext ================================================== */
.mk-prose { max-width: 68ch; }
.mk-prose h3 {
  font-size: 1.3rem;
  margin: var(--s6) 0 var(--s3);
}
.mk-prose h3:first-child { margin-top: 0; }
.mk-prose p { color: var(--on-dark-2); }
.mk-prose p + p { margin-top: var(--s4); }
.mk-prose .strong {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--on-dark);
}

.mk-cols h3 {
  font-size: 1.25rem;
  margin-bottom: var(--s2);
}
.mk-cols > div p + p { margin-top: var(--s3); }

/* Abschnitt mit Überschrift und Fließtext direkt darunter */
.mk-title + .mk-prose,
.mk-title + .mk-cols { margin-top: 0; }
.mk-prose + .mk-cols,
.mk-cols + .mk-prose { margin-top: var(--s7); }

/* ===== Links im Fließtext =========================================
 * Unterstrichen in Ruhe, Kupfer erst beim Überfahren: der Akzent
 * bleibt bei der Handlung. Auf dem dunklen Band gilt die Regel des
 * Themes (helle Links), darum sind diese Regeln auf die hellen
 * Flächen beschränkt. */
.mk-section p a:not(.mk-btn),
.mk-section h3 a,
.mk-closing p a:not(.mk-btn),
.mk-closing address a {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.mk-section p a:not(.mk-btn):hover,
.mk-section h3 a:hover,
.mk-closing p a:not(.mk-btn):hover,
.mk-closing address a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Quellenangabe unter einem Thema */
.mk-source { font-size: 0.92rem; }

/* ===== Kontakt ==================================================== */
.mk-closing address { font-style: normal; }
.mk-closing .mk-contact-line {
  color: var(--on-dark);
  margin-bottom: var(--s5);
}

@media (max-width: 719px) {
  .mk-prose h3 { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .mk-section p a,
  .mk-section h3 a,
  .mk-closing p a,
  .mk-closing address a {
    transition:
      color var(--dur-colour) ease-out,
      text-decoration-color var(--dur-colour) ease-out;
  }
}