/* ---------------------------------------------------------------
   mupu.de — M & P Unternehmensberatung GmbH
   Statisches Stylesheet, keine externen Ressourcen, kein JavaScript.
   Schriften kommen ausschliesslich vom Geraet des Besuchers.
   --------------------------------------------------------------- */

:root {
  --rot: #E00F16;
  --text: #1a1a1a;
  --text-leise: #555;
  --linie: #e0e0e0;
  --spalte: 42rem;

  /* Hausschrift Aptos. Sie liegt auf Windows und mit Office vor und wird
     deshalb nur angefordert, nicht ausgeliefert - die Schriftdatei ist
     lizenziert und darf nicht mitgehostet werden. Geraete ohne Aptos
     nehmen ihre eigene humanistische Grotesk, die sehr aehnlich wirkt.
     So laedt die Seite weiterhin nichts von fremden Servern nach. */
  --schrift: "Aptos", "Segoe UI Variable Text", "Segoe UI",
             -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             Arial, sans-serif;
  --schrift-display: "Aptos Display", "Aptos", "Segoe UI Variable Display",
                     "Segoe UI", -apple-system, BlinkMacSystemFont,
                     "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 1.5rem;
  background: #fff;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- Grundgeruest ------------------------------------------------ */

.seite {
  max-width: var(--spalte);
  margin: 0 auto;
}

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

header {
  padding-top: 3.5rem;
}

.logo {
  display: block;
  width: 200px;
  max-width: 70%;
  height: auto;
}

nav {
  margin-top: 2rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--rot);
  font-family: var(--schrift);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav a {
  color: var(--text-leise);
  text-decoration: none;
  margin-right: 1.6rem;
  display: inline-block;
  padding: 0.15rem 0;
}

nav a:last-child { margin-right: 0; }

nav a:hover,
nav a:focus {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

nav a[aria-current="page"] {
  color: var(--rot);
  font-weight: 600;
}

/* --- Inhalt ------------------------------------------------------ */

main {
  padding: 3rem 0 1rem;
}

h1 {
  font-family: var(--schrift-display);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 1.8rem;
  max-width: 32rem;
}

h2 {
  font-family: var(--schrift);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 3rem 0 1rem;
}

p {
  margin: 0 0 1.2rem;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover,
a:focus { color: var(--rot); }

strong { font-weight: 700; }

/* Abgesetzter Block, z. B. Machbarkeitsstudien */
.block {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--linie);
}

.block h2 { margin-top: 0; }

/* Kleiner, leiser Hinweis - etwa die Abgrenzung zum Gutachten */
.hinweis {
  font-size: 0.9375rem;
  color: var(--text-leise);
  line-height: 1.6;
}

/* Kontaktdaten */
.daten {
  margin: 0 0 1.5rem;
  line-height: 1.9;
}

.daten dt {
  font-family: var(--schrift);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-top: 1.2rem;
}

.daten dd {
  margin: 0;
}

/* --- Fuss -------------------------------------------------------- */

footer {
  margin-top: 4.5rem;
  padding: 1.4rem 0 3rem;
  border-top: 1px solid var(--linie);
  font-family: var(--schrift);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #888;
}

footer a {
  color: #888;
  text-decoration: none;
}

footer a:hover,
footer a:focus {
  color: var(--rot);
  text-decoration: underline;
}

.footer-zeile + .footer-zeile { margin-top: 0.5rem; }

/* --- Schmale Bildschirme ----------------------------------------- */

@media (max-width: 34rem) {
  body { font-size: 1rem; padding: 0 1.25rem; }
  header { padding-top: 2.25rem; }
  .logo { width: 165px; }
  nav { margin-top: 1.5rem; line-height: 2.2; }
  nav a { margin-right: 1.1rem; }
  main { padding-top: 2.25rem; }
  h1 { font-size: 1.4375rem; }
}

/* --- Druck -------------------------------------------------------- */

@media print {
  body { padding: 0; font-size: 11pt; }
  nav, footer { display: none; }
  a { text-decoration: none; color: #000; }
}