* {
  box-sizing: border-box;
}
:root {
  --hintergrund: #7c98ae;
  --hervorgehoben: #253255;
  --navfarbe: #ffb300;
  --texthell: #fff;
  --schriftbasis: 0.875rem; /* 14px */
}

body {
  font-family: "PigiarniqRegular", sans-serif;
  margin: 0;
  background-color: var(--hintergrund);
  color: var(--texthell);
  font-size: var(--schriftbasis);
}
h1,
h2,
h3 {
  font-family: "PigiarniqBold", sans-serif;
  font-weight: normal;
}
h1.name {
  font-size: 75px;
  color: #fff;
  font-family: "JosefinSansStdLight", Arial, sans-serif;
  padding-top: 55px;
  margin-bottom: 0;
  margin-left: -3px;
  margin-top: 0;
  line-height: 1;
}
.startseite .portrait {
  padding-top: 64px;
}
.startseite .portrait img {
  display: block;
}
.datenschutz {
  --schriftbasis: 1.25rem;
}
.datenschutz p,
.datenschutz h3,
.datenschutz li {
  font-size: var(--schriftbasis);
  margin-bottom: 1rem;
}
.datenschutz h2 {
  color: var(--hervorgehoben);
  font-size: var(--schriftbasis);
  padding: 1.5rem 0 1.2rem;
  margin-top: 0;
}
.h2 {
  font-size: 100%;
  text-transform: uppercase;
  margin-bottom: 0;
}
.cv .h2:first-child {
  margin-top: 0;
}
.cv .h2 {
  margin-top: 1.2rem;
}
.cv .ergaenzung p:last-child {
  margin-bottom: 0;
}
.h2 + p {
  margin-top: 0;
}
.startseite h2.thema1 {
  color: var(--hervorgehoben);
  font-size: 1rem;
}
.punkt {
  font-size: 50px;
  vertical-align: middle;
}
h3 {
  font-size: 100%;
}
.aktuell h3 {
  margin: 0;
}
.aktuell h4 {
  color: #253255;
  margin: 0;
  padding-top: 1.56rem;
  /* padding-bottom: 1.25rem; */
  font-size: var(--schriftbasis);
}
.rang {
  font-size: 14px;
  line-height: 22px;
  color: #253255;
  padding-top: 14px;
  margin-top: 0;
}
.link {
  color: var(--texthell);
  text-decoration: underline;
  font-family: "PigiarniqItalic", sans-serif;
}
.link:hover,
.link:focus,
.link:active {
  text-decoration: none;
}

.hauptnav {
  background-color: var(--navfarbe);
  padding: 0.75rem;
  padding-top: 2.75rem;
  font-family: "PigiarniqBold", sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  display: flex;
  justify-content: center;
}

.hauptnav ul {
  max-width: 960px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  /* margin-left: -190px; */
  padding: 0;
}

.hauptnav a {
  text-decoration: none;
  color: var(--texthell);
}
.hauptnav a[href="startseite.html"] {
  margin-left: -5px;
}

.hauptnav a.current,
.hauptnav a:active,
.hauptnav a:focus,
.hauptnav a:hover {
  color: var(--hervorgehoben);
}

.seitentitel,
.aktuell time {
  color: var(--hervorgehoben);
  font-family: "PigiarniqBold", sans-serif;
  font-weight: normal;
  font-size: 1.375rem;
  margin-bottom: 0;
  margin-top: 46px;
}
.aktuell img {
  display: block;
  padding-bottom: 0.2rem;
}
.aktuell time:first-child {
  margin-top: calc(114 / 16 * 1rem);
}
.aktuell time {
  margin-top: 3rem;
  margin-bottom: 0.15rem;
}
.aktuell h3,
.aktuell img {
  margin-top: 1.25rem;
}
.aktuell h3 + p {
  margin-top: 0;
}
.aktuell .abstandoben {
  margin-top: 1.25rem;
}
.aktuell .bild1 {
  margin-bottom: 1rem;
  margin-top: 2.3rem;
}
.aktuell .jahr2 {
  /* margin-top: 0; */
  margin-bottom: 0;
  align-self: end;
}
.aktuell .thema2 {
  margin-bottom: 3rem;
}
.aktuell .jahr3 {
  margin-top: 0;
}
.hauptinhalt {
  max-width: 960px;
  margin: auto;
  display: grid;
  padding-left: 11.25rem;
}

/* @media (max-width: 620px) { */
@media (max-width: 850px) {
  .hauptnav {
    padding-top: 1rem;
  }
  .hauptnav ul {
    justify-content: center;
    gap: 1rem;
    font-size: .9rem;
  }
  .haupnav a {
    display: block;
  }
  .hauptnav a[href="startseite.html"] {
    margin-left: 0;
  }
  .hauptinhalt {
    padding-left: 0.5rem;
  }
  .aktuell {
    margin-right: 1rem;
    grid-template-columns: 60% 1fr !important;
  }

  img {
    width: 100%;
    height: auto;
  }
}
/* @media (max-width: 600px) {
   .hauptinhalt {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
  } 
   .aktuell a:has(img) {
    float: right;
    margin-right: 0.5rem;
    clear: right;
  }
 
} */
.forschung {
  gap: 1.2rem 2rem;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-areas:
    "seitentitel  seitentitel seitentitel"
    "jahr1         thema1     bild"
    "jahr2         thema2     bild"
    "jahr3         thema3     bild"
    "jahr4         thema4     bild";
}
.forschung.hauptinhalt p:first-child,
.themen.hauptinhalt p:first-child {
  margin-top: 0;
}
@media (max-width: 680px) {
  .hauptinhalt {
    padding-left: 0.5rem;
  }
}
@media (max-width: 620px) {
  .forschung {
    grid-template-columns: 1fr 1.8fr 1fr;
    column-gap: 0.5rem;
  }
}
.themen {
  gap: 1.2rem 1rem;
  grid-template-columns: 1fr 4fr max-content;
  grid-template-areas:
    "seitentitel  seitentitel seitentitel"
    "jahr1         thema1     bild"
    "jahr2         thema2     bild"
    "jahr3         thema3     bild"
    "jahr4         thema4     bild"
    "jahr5         thema5     bild"
    "jahr6         thema6     bild"
    "jahr7         thema7     bild"
    "jahr8         thema8     bild"
    "jahr9         thema9    bild"
    "ergaenzung    ergaenzung .";
}
@media (max-width: 620px) {
  .themen {
    grid-template-columns: 1fr 2fr 1fr;
  }
}
.publikationen {
  /* grid-template-columns: max-content max-content 14.375rem min-content; */
  grid-template-columns: 0.5fr 1fr 2fr 1fr;
  gap: 2rem 1rem;
  grid-template-areas:
    "seitentitel seitentitel seitentitel seitentitel"
    "jahr1        autor1     thema1      cover-staedtebau"
    "jahr2         autor2     thema2     cover-staedtebau"
    "jahr3         autor3     thema3     cover-staedtebau"
    "jahr4         autor4     thema4     cover-staedtebau"
    "jahr5         autor5    thema5     cover-staedtebau"
    "ergaenzung    ergaenzung ergaenzung ergaenzung";
}
@media (max-width: 920px) {
  .publikationen {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 620px) {
  .publikationen {
    grid-template-columns: 0.5fr 2fr 3fr 2fr;
  }
}
@media (max-width: 460px) {
  .publikationen {
    gap: 0.8rem;
    grid-template-areas:
      "seitentitel seitentitel seitentitel seitentitel"
      "jahr1        autor1     thema1      cover-staedtebau"
      "jahr2         autor2     thema2     thema2"
      "jahr3         autor3     thema3     thema3"
      "jahr4         autor4     thema4     thema4"
      "jahr5         autor5    thema5     thema5"
      "ergaenzung    ergaenzung ergaenzung ergaenzung";
  }
}
.aktuell {
  gap: 0rem 2rem;
  align-items: start;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(4, min-content);
  grid-template-areas:
    "person person"
    "thema-1 bild-1"
    "thema0 bild0"
    "jahr1 bild1"
    "thema1 bild1"
    "jahr2 bild1"
    "thema2 bild1"
    "jahr3 jahr3"
    "thema3 bild2"
    "jahr4 bild2"
    "thema4 bild2"
    "jahr5 jahr5"
    "thema5 ."
    "jahr6 jahr6"
    "thema6 bild3"
    "jahr7 bild3"
    "thema7 bild3"
    "jahr8 jahr8"
    "thema8 bild4"
    "jahr9 bild4"
    "thema9 bild4"
    "jahr10 ."
    "thema10 ."
    "jahr11 ."
    "thema11 .";
}
@media (max-width: 460px) {
  .aktuell {
    grid-template-areas:
      "person person"
      "thema-1 bild-1"
      "thema0 bild0"
      "jahr1 bild1"
      "thema1 bild1"
      "jahr2 bild1"
      "thema2 bild1"
      "jahr3 jahr3"
      "thema3 bild2"
      "jahr4 bild2"
      "thema4 thema4"
      "jahr5 jahr5"
      "thema5 thema5"
      "jahr6 jahr6"
      "thema6 bild3"
      "jahr7 bild3"
      "thema7 thema7"
      "jahr8 jahr8"
      "thema8 bild4"
      "jahr9 bild4"
      "thema9 thema9"
      "jahr10 jahr10"
      "thema10 thema10"
      "jahr11 jahr11"
      "thema11 thema11";
  }
}
.aktuell h1.name {
  font-size: 60px;
}
.startseite {
  gap: 0rem 2.5rem;
  align-items: start;
  grid-template-columns: 1.8fr 1fr;
  grid-template-areas:
    "person portrait"
    "thema1 portrait"
    "thema2 thema2"
    "thema3 thema3";
}
@media (max-width: 620px) {
  .startseite {
    grid-template-columns: 55% 35%;
  }
}
@media (max-width: 450px) {
  .startseite {
    grid-template-columns: 100%;
    grid-template-areas: none;
  }
  .startseite > * {
    grid-area: auto !important;
  }
  .startseite img {
    width: auto;
  }
  .startseite .portrait {
    justify-self: center;
    padding-top: 1rem;
  }
}
.impressum {
  gap: 0rem;
  align-items: start;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "seitentitel seitentitel"
    "thema1 foto"
    "thema1 .";
}
@media screen and (max-width: 620px) {
  .impressum {
    /* gap: 0; */
  }
}
.datenschutz {
  hyphens: auto;
  gap: 0rem 2.5rem;
  align-items: start;
  grid-template-columns: min(560px, 95%);
  grid-template-areas:
    "seitentitel"
    "thema1";
}

.impressum h2 {
  color: #253255;
  margin: 0;
  padding-top: 1.56rem;
  /* padding-bottom: 1.25rem; */
  font-size: var(--schriftbasis);
}
.impressum .foto {
  padding-right: 1rem;
}
.aktuell p {
  margin-bottom: 0;
}
.aktuell a p {
  margin-top: 0;
  margin-left: 1rem;
}
.person {
  grid-area: person;
}
.autor1 {
  grid-area: autor1;
}
.autor2 {
  grid-area: autor2;
}
.autor3 {
  grid-area: autor3;
}
.autor4 {
  grid-area: autor4;
}
.autor5 {
  grid-area: autor5;
}
.portrait {
  grid-area: portrait;
}
.foto {
  grid-area: foto;
}
.jahr1 {
  grid-area: jahr1;
}
.cover-staedtebau {
  grid-area: cover-staedtebau;
}
.thema1 {
  grid-area: thema1;
}
/* .titel1 {
    grid-area: titel1;
} */
.bild {
  grid-area: bild;
}
.bild-1 {
  grid-area: bild-1;
  
}
.bild0 {
  grid-area: bild0;
  padding-top: 33px;
}
.bild1 {
  grid-area: bild1;
}
.bild2 {
  grid-area: bild2;
}
.bild3 {
  grid-area: bild3;
}
.bild4 {
  grid-area: bild4;
}
.jahr2 {
  grid-area: jahr2;
}
.thema-1 {
  grid-area: thema-1;
  padding-top: 33px;
}
.thema2 {
  grid-area: thema2;
}

.seitentitel {
  grid-area: seitentitel;
}
.jahr3 {
  grid-area: jahr3;
}
.thema3 {
  grid-area: thema3;
}
.jahr4 {
  grid-area: jahr4;
}
.thema4 {
  grid-area: thema4;
}
.jahr5 {
  grid-area: jahr5;
}
.thema5 {
  grid-area: thema5;
}
.jahr6 {
  grid-area: jahr6;
}
.thema6 {
  grid-area: thema6;
}
.jahr7 {
  grid-area: jahr7;
}
.thema7 {
  grid-area: thema7;
}
.jahr8 {
  grid-area: jahr8;
}
.thema8 {
  grid-area: thema8;
}
.jahr9 {
  grid-area: jahr9;
}
.thema9 {
  grid-area: thema9;
}
.jahr0 {
  grid-area: jahr0;
}
.thema10 {
  grid-area: thema10;
}
.jahr10 {
  grid-area: jahr10;
}
.jahr11 {
  grid-area: jahr11;
}
.thema0 {
  grid-area: thema0;
  padding-top: 33px;

}
.thema11 {
  grid-area: thema11;
}
.ergaenzung {
  grid-area: ergaenzung;
}
.ergaenzung ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cv {
  gap: 1.7rem 0.5rem;
  grid-template-columns: 6rem min(400px, 70%);
  grid-template-areas: none;
}
.cv .ergaenzung,
.cv .seitentitel {
  grid-column: span 2;
}
.cv > * {
  grid-area: auto;
}
.startseite + .footernav {
  border-bottom: 8px solid var(--navfarbe);
}
@media screen and (max-width: 980px) {
  .footernav {
    padding-left: 0.5rem;
  }
}
.footernav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 700px) {
  .footernav {
    flex-direction: column;
    align-items: flex-start;
  }
  .footernav p {
    align-self: flex-end;
  }
}
.footernav ul {
  flex: 1;
  margin-top: 3.5rem;
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  padding-bottom: 2.5rem;
  padding-left: 6rem;
}
.footernav p {
  padding-right: max(3rem, 5%);
  color: #253255;
}
.footernav a {
  color: #fff;
  text-decoration: none;
  font-family: "PigiarniqItalic", sans-serif;
  font-size: 1rem;
  margin-left: min();
}
.footernav a:hover,
.footernav a:focus,
.footernav a:active,
.footernav a.aktuell {
  color: var(--hervorgehoben);
}



.footernav li:first-child {
  margin-right: 2rem;
}