@import url("fonts.css");
@import url("colors.css");
@import url("mobile.css") (max-aspect-ratio: 15/16);
@import url("tablet.css") (min-aspect-ratio: 15/16) and (max-aspect-ratio: 14/9);
@import url("desktop.css") (min-aspect-ratio: 14/9);

body {
    margin: 0;
}

div.content {
    margin-top: 0.53rem;
    margin-bottom: 0.53rem;
}

div.header {
    width           : 100%;
    background-color: var(--tud-blau-100);
    align-items     : center;
    padding-bottom:1em;
}

div.footer-links {
    height    : 3rem;
    border-top: dotted white 0.06rem;
}

span.header-text {
    color       : white;
    font-family: "Open Sans", sans-serif;
    font-size   : 1rem;
    margin-right: 2rem;
    padding:1em;
    padding-top:2em;
}

span.header-heading {
    color       : white;
    font-family: "Open Sans", sans-serif;
    font-size   : 2rem;
    margin-right: 2rem;
    padding:1em;
}


div.content-width {
    grid-column-start: 1;
    grid-column-end  : 13;
    margin:3em 3em 4em;
}

img.footer-logo {
    height      : 2.4rem;
    margin-top  : 2.13rem;
    margin-right: 11.6rem;
}

img.contributor-logo {
    height: 2.4rem;
}

h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: normal;
    font-size  : 1.6rem;
    line-height: 130%;
    text-transform: uppercase;
}

h2 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size  : 1.46rem;
    line-height: 130%;
}

h3 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size  : 1.26rem;
    line-height: 130%;
}

h4 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size  : 1.06rem;
    line-height: 130%;
}

h5 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size  : 1rem;
    line-height: 120%;
}

p {
    font-family: "Open Sans", sans-serif;
    font-size  : 1rem;

    line-height: 170%;
}
p, h1, h2, h3, h4, h5, ul{
    padding-left:3rem;
    padding-right:3rem;
}
figcaption {
    font-family: "Open Sans", sans-serif;
    font-size  : 0.8rem;
    line-height: 150%;
}

a {
    font-family    : "Open Sans", sans-serif;
    font-size      : 1rem;
    line-height    : 170%;
    color          : var(--tud-link-color);
    text-decoration: none;
}
li::marker{
    font-size:1rem;
    padding-left:1rem;
}

a.versalien {
    text-transform: uppercase;
    line-height   : 130%;
    color         : black;
}


div.card {
    background-color: var(--tud-grau-70);
    position: relative;
}

div.card-image {
    width: 100%;
}

div.card-text {
    margin-left: 0.6rem;
    margin-right: 0.5rem;
}

div.card-link {
    border-top: 0.1rem white solid;
    padding-top: 0.6rem;
    padding-left: 0.6rem;
    margin-bottom: 0.6rem;
    position: absolute;
    bottom: 0;
    width: 100%;
}

figure.card-figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

div.vcard {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: minmax(0px, auto);
    border: 1px solid var(--tud-grau-70);
}

div.vcard-text {
    margin-left: 1rem;
}

a.button-vcard {
    margin-bottom: 2rem;
    /* TODO: Button should align to bottom of container */
}