:root {
  --grund: #f6f3ec;
  --tinte: #1b1a17;
  --leise: #6b675e;
  --linie: #dcd6c8;
  --akzent: #0e5a6b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #15171a;
    --tinte: #ece8df;
    --leise: #9a958a;
    --linie: #2c3035;
    --akzent: #6fc3d4;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
.seite { max-width: 1040px; margin: 0 auto; padding: 72px 28px 56px; }

header { margin-bottom: 72px; }
.moewen { display: block; width: 138px; height: 51px; color: var(--akzent); margin-bottom: 22px; }
.name { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--leise); margin: 0 0 14px; }
.dach {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 34px; line-height: 1.25; font-weight: 400; margin: 0; max-width: 21em;
}

.trio { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie); }
.kachel { padding: 34px 30px 36px 0; border-right: 1px solid var(--linie); display: flex; flex-direction: column; }
.kachel + .kachel { padding-left: 30px; }
.kachel:last-child { border-right: 0; padding-right: 0; }
.verb {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 40px; line-height: 1.1; font-weight: 400; margin: 0 0 10px; hyphens: manual;
}
.projekt { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--akzent); margin: 0 0 20px; }
.kachel p.text { margin: 0 0 26px; }
.repo {
  margin-top: auto; align-self: flex-start;
  color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 15px;
  border-bottom: 2px solid var(--akzent); padding-bottom: 2px;
}
.repo:hover, .repo:focus { color: var(--akzent); }

.ki { border-top: 1px solid var(--linie); padding-top: 34px; display: grid; grid-template-columns: 1fr 2fr; gap: 0 30px; }
.ki-kopf { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--akzent); margin: 6px 0 10px; }
.ki-text {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 22px; line-height: 1.4; margin: 0;
}
@media (max-width: 760px) { .ki { grid-template-columns: 1fr; padding-top: 26px; } .ki-text { font-size: 19px; } }

footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
footer a { color: inherit; }

@media (max-width: 760px) {
  .seite { padding: 44px 22px 40px; }
  header { margin-bottom: 44px; }
  .dach { font-size: 26px; }
  .trio { grid-template-columns: 1fr; }
  .kachel, .kachel + .kachel { padding: 28px 0 30px; border-right: 0; border-bottom: 1px solid var(--linie); }
  .kachel:last-child { border-bottom: 0; }
  .verb { font-size: 34px; }
}

/* Textseiten (Impressum, Datenschutz) */
.zurueck { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--leise); text-decoration: none; }
.zurueck:hover, .zurueck:focus { color: var(--akzent); }
.textseite { max-width: 720px; }
.textseite header { margin-bottom: 40px; }
.textseite h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 40px; line-height: 1.1; font-weight: 400; margin: 28px 0 0;
}
.textseite h2 { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--akzent); margin: 38px 0 10px; }
.textseite h3 { font-size: 15px; font-weight: 700; margin: 24px 0 8px; }
.textseite p, .textseite ul { margin: 0 0 14px; }
.textseite ul { padding-left: 1.2em; }
.textseite li { margin-bottom: 4px; }
.textseite a { color: inherit; text-decoration-color: var(--akzent); text-underline-offset: 3px; }
footer .trenner { margin: 0 .5em; }
@media (max-width: 760px) { .textseite h1 { font-size: 32px; } }