/* Methodik-Seite des Bierdeckel-Rechners (/rechner/methodik).
   Eigene Datei, damit die Tool-Seite /rechner leicht bleibt.
   Farben ausschließlich über die --w1-*-Tokens aus welle1.css,
   Schriften über --serif / --sans aus style.css. Keine neuen Hexwerte. */

/* ---------------------------------------------------------------- Grundgerüst */

.mk-page {
  padding: 32px 0 72px;
  /* Sprungziele (#annahme-…, #quelle-…, Abschnitte) dürfen nicht unter der
     klebenden Kopfleiste landen. Gleiche Rechnung wie `section` in style.css:
     Kopfhöhe (--header-h) + 12 px Luft. Unterhalb von ~1060 px bricht die
     Navigation auf eine zweite Zeile um — gemessen 99 px bei 360 px und 95 px
     bei 768 px Breite —, dort sind zwei Kopfzeilen einzurechnen. */
  --mk-sprungziel: calc(2 * var(--header-h, 62px) + 12px);
}

@media (min-width: 1100px) {
  .mk-page {
    --mk-sprungziel: calc(var(--header-h, 62px) + 12px);
  }
}

/* Textspalte: rund 70 Zeichen, nie über die volle Breite. */
.mk-inhalt {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--w1-text-grau);
}

.mk-inhalt p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.7;
}

.mk-inhalt a {
  color: var(--w1-terra);
}

.mk-inhalt a:hover {
  color: var(--w1-gruen);
}

.mk-inhalt a:focus-visible,
.mk-formel-scroll:focus-visible {
  outline: 2px solid var(--w1-terra);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- Kopf */

.mk-kopf {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--w1-regler-spur);
}

.mk-zurueck {
  margin: 0 0 18px;
  font-size: 0.85rem;
  font-family: var(--sans);
  letter-spacing: 0.04em;
}

.mk-zurueck--fuss {
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--w1-regler-spur);
}

.mk-titel {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 6.5vw, 2.5rem);
  line-height: 1.12;
  color: var(--w1-tinte);
  margin: 0 0 16px;
}

.mk-inhalt .mk-einleitung {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--w1-tinte);
  margin-bottom: 14px;
}

.mk-inhalt .mk-stand {
  font-size: 0.85rem;
  color: var(--w1-grau);
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------- Inhaltsverzeichnis */

.mk-toc {
  margin: 0 0 8px;
}

.mk-toc ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.mk-toc a {
  font-size: 0.86rem;
  color: var(--w1-gruen);
}

/* ---------------------------------------------------------------- Abschnitte */

.mk-abschnitt {
  margin-top: 40px;
  scroll-margin-top: var(--mk-sprungziel);
}

.mk-h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4.4vw, 1.65rem);
  line-height: 1.2;
  color: var(--w1-tinte);
  margin: 0 0 14px;
}

.mk-h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--w1-tinte);
  margin: 0 0 8px;
}

/* ---------------------------------------------------------------- Formeln */

.mk-formel {
  margin: 0 0 20px;
}

/* Nur dieser Kasten scrollt seitlich — die Seite selbst nie. */
.mk-formel-scroll {
  overflow-x: auto;
  max-width: 100%;
  background: var(--w1-papier);
  border: 1px solid var(--w1-regler-spur);
  border-radius: 10px;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.mk-formel-code {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--w1-tinte);
  white-space: pre;
  tab-size: 2;
}

.mk-inhalt .mk-nachsatz {
  background: var(--w1-sand-sekundaer);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- Annahmen */

.mk-annahmen {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mk-annahme {
  background: var(--w1-papier);
  border: 1px solid var(--w1-regler-spur);
  border-left: 4px solid var(--w1-step-dot);
  border-radius: 10px;
  padding: 16px 18px;
  scroll-margin-top: var(--mk-sprungziel);
}

/* Angesprungene Annahme (Marke „Annahme" im Rechner zeigt hierher). */
.mk-annahme:target {
  border-left-color: var(--w1-terra);
  background: var(--w1-peach);
  border-color: var(--w1-peach-rand);
}

.mk-inhalt .mk-annahme-wert {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.mk-annahme-zahl {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--w1-terra-dark);
}

.mk-annahme-einheit {
  font-size: 0.85rem;
  color: var(--w1-grau);
}

.mk-inhalt .mk-annahme-text {
  margin: 0;
  font-size: 0.95rem;
}

.mk-inhalt .mk-annahme-regel,
.mk-inhalt .mk-annahme-quelle {
  margin: 10px 0 0;
  font-size: 0.87rem;
  color: var(--w1-grau);
}

.mk-annahme-quelle a {
  word-break: break-word;
}

/* ---------------------------------------------------------------- Grenzen */

.mk-grenzen {
  margin: 0;
  padding-left: 1.2em;
}

.mk-grenzen li {
  margin-bottom: 10px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- Quellen */

.mk-quellen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mk-quelle {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.6;
  scroll-margin-top: var(--mk-sprungziel);
}

.mk-quelle-nr {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--w1-terra);
}

.mk-quelle-text {
  min-width: 0;
}

.mk-quelle-text a {
  word-break: break-word;
}

.mk-quelle-jahr {
  color: var(--w1-grau);
}

.mk-quelle-jahr::before {
  content: " · ";
}

.mk-quelle-titel {
  color: var(--w1-tinte);
}

.mk-quelle-hinweis {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--w1-grau);
}

.mk-quelle-fehlt {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.8rem;
  color: var(--w1-grau);
}

/* ---------------------------------------------------------------- Ab Tablet */

@media (min-width: 700px) {
  .mk-page {
    padding: 48px 0 96px;
  }

  .mk-inhalt p {
    font-size: 1.03rem;
  }

  .mk-abschnitt {
    margin-top: 52px;
  }

  .mk-formel-code {
    font-size: 0.88rem;
  }

  .mk-annahme-zahl {
    font-size: 1.7rem;
  }
}