@import url("https://use.typekit.net/jbn8hby.css");


:root {

    --clr-primary-400: #435867;
    --clr-primary-pub-400: #B44745;
    --clr-accent-400: #DAE0E3;
    --clr-accent-600: #c6cdd1;

    --clr-links-hover: #A8A8A7;
    --clr-links-pub-hover: #C29599;

    --ff-primary: "new-hero", sans-serif;
    
    --ff-body: var(--ff-primary);
    --ff-header: var(--ff-primary);
    --ff-pdf: var(--clr-primary-pub-400);

    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;

    --fs-400: 1rem;
    --fs-500: 1.5rem;
    --fs-600: 1.75rem;

    --fs-body: var(--fs-400);
    --fs-primary-heading: var(--fs-600);
    --fs-secondary-heading: var(--fs-500);
    --fs-nav: var(--fs-400);
    --fs-button: var(--fs-400);

    --size-100: .25rem;
    --size-200: .5rem;
    --size-300: .75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;

    /*
    
    Heller Hintergrund: #DAE0E3
    Dunkelblaugraue Schrift: #435867
    Rote Schrift (bis jetzt nur bei Publications): #B44745

    Over-Effekt bei Links mit der dunkelblaugrauen Schrift: #A8A8A7 (mittleres Grau)
    Over-Effekt bei Links mit der roten Schrift: #C29599


    Der Text ist generell 16 Pt groß. // 1rem
    
    Die Headlines wie z.B. „NEWS ONE“ sind 24 Pt und in Versalien. // 1.5rem
    
    „Gabriele Jutz“ ganz oben ist 28 Pt. // 1.75rem
    
    Die Zeile darunter „moving art …“ ist so wie der restliche Text 16 Pt.
    
    Die Menüpunkte und „IMPRINT“ sind auch 16 Pt in Versalien.
    
    */
}

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

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

html:focus-within {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
    height: auto;
}



/* general styling */

body {
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: var(--clr-primary-400);
}

ul, li {
    list-style: none;
    margin: 0;
}

a, a:link {
    text-decoration: underline;
    color: var(--clr-primary-400);
}

i {
    font-style: italic;
}

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

a.logo-brand {
    text-decoration: none;
}

.image-caption {
    font-size: 11px;
    padding-top: 4px;
}

/* News */
.news-container h2 {
    font-size: var(--fs-secondary-heading);
    padding-bottom: var(--size-400);
}

.news-container a,
.news-container a:link {
    text-decoration: none;
}

.readmore-container {
    margin-top: 30px;
}

.readmore {
    border-bottom: 1px solid var(--clr-primary-400);
    text-transform: lowercase;
    padding-bottom: .5rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

a.readmore:hover {
    border-bottom: 1px solid var(--clr-links-hover);
}

.readmore::after {
    content: ">";
    font-size: .85rem;
    padding-left: .5rem;
}

/* Video */
.one-column {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* padding-top: 56.25%; */
}

.video-embed-item {
    max-width: 100%;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


/* navigation */

.primary-header {
    margin-top: var(--size-700);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.mobile-nav-toogle {
    display: none;
}

.expertise {
    font-size: var(--fs-400);
}

.expertise ul {
    display: flex;
    gap: .5rem;
}

.expertise li {
    list-style: none;
}

.expertise li::after {
    content: "\2022";
    padding-left: .5rem;
}

.expertise li:last-child::after {
    content: "";
}

.nav-list {
    display: flex;
    gap: var(--size-700);
}

.nav-list a,
.nav-list a:link {
    text-decoration: none;
    color: var(--clr-primary-400);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

.nav-list a:hover,
.nav-list a:focus {
    color: var(--clr-links-hover);
}

footer a,
footer a:link {
  text-decoration: none;
}



@media (max-width: 60em) {

    .expertise {
        text-align: center;
    }

    .expertise ul {
        flex-direction: column;
        gap: inherit;
    }

    .expertise li::after {
        content: "";
    }

    .primary-navigation {
        display: none;
        padding-top: 2rem;

        /* position: fixed;
        inset: 14rem var(--size-400) auto; */
        background: #fff;
    }

    .nav-list {
        display: grid;
        gap: var(--size-400);
        text-align: center;
    }

    .primary-navigation[data-visible] {
        display: block;
    }

    .mobile-nav-toogle {
        display: block;
        border:1px solid var(--clr-accent-600);
        border-radius: 50%;
        background: transparent;
        padding: 0.5em;
        cursor: pointer;
        background-image: url(../Images/menu-burger-horizontal-svgrepo-com.svg);
        width: 3rem;
        aspect-ratio: 1;
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mobile-nav-toogle[aria-expanded="true"] {
        background-image: url(../Images/close-svgrepo-com.svg);
    }

    .mobile-nav-toogle .icon-hamburger {
        width: 30px;
    }

    .mobile-nav-toogle .icon-close {
        display: none;
        width: 30px;
    }
}

/* Publications */
/* .publications .frame-layout-0 {
    padding-block: var(--size-600);
} */

.publications h1, .services h1 {
    padding-bottom: var(--size-900);
}

.publications h1, .default h1 {
    padding-bottom: var(--size-900);
}

.publications h2 {
    padding-bottom: var(--size-600);
}

.journal-articles-book-chapters {   
}

.publications .ce-textpic {
    display: grid;
    grid-auto-flow: column;
    gap: 3rem;
    margin-bottom: 1rem;
    grid-template-columns: auto 1fr;
}

.journal-articles .ce-textpic {
    display: grid;
    grid-auto-flow: column;
    gap: 3rem;
    margin-bottom: 1rem;
}

.publications .ce-textpic .publication-pdf {
    width: 40px;
    height: auto;
    padding-top: 7px;
}

.journal-articles .ce-textpic .publication-pdf {
    width: 40px;
    height: auto;
    padding-top: 7px;
}

.pdf-container {
    color: var(--ff-pdf);
}

.journal-articles-book-chapters li {
    display: grid;
    grid-auto-flow: column;
    gap: 3rem;
    margin-bottom: 1rem;
}

.journal-articles-book-chapters li img {
    width: 40px;
    height: auto;
    padding-top: 7px;
}

.journal-articles-book-chapters a {
    text-decoration: underline;
}

/* Publication detail */
.publication-detail .pdf-container {
    display: grid;
    grid-auto-flow: column;
    gap: 3rem;
    margin-bottom: 1rem;
    grid-template-columns: auto 1fr;
}
.publication-detail .ce-textpic .publication-pdf {
    width: 40px;
    height: auto;
    padding-top: 7px;
}

/* end */


/* Utility classes */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    --max-width: 1100px;
    --padding: 1rem;

    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
}

.even-columns {
    display: grid;
    gap: 1rem;
}

@media (min-width: 50em) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

.text-align-center {
    text-align: center;
}

.text-primary-400 { color: var(--clr-primary-400); }
.text-primary-pub-400 { columns: var(--clr-primary-pub-400); }
.text-accent-400 { color: var(--clr-accent-400); }

.bg-primary-400 { background-color: var(--clr-primary-400); }
.bg-accent-400 { background-color: var(--clr-accent-400); }
.bg-primary-pub-400 { background-color: var(--clr-primary-pub-400); }

.fw-regular { font-weight: var(--fw-regular); }
.fw-semi-bold { font-weight: var(--fw-semi-bold); }
.fw-bold { font-weight: var(--fw-bold); }

.fs-body { font-size: var(--fs-body); }
.fs-primary-heading { font-size: var(--fs-primary-heading); }
.fs-secondary-heading { font-size: var(--fs-secondary-heading); }

.fs-400 { font-size: var(--fs-400); }
.fs-500 { font-size: var(--fs-500); }
.fs-600 { font-size: var(--fs-600); }

.padding-block-600 {
    padding-block: var(--size-600);
}

.padding-block-700 {
    padding-block: var(--size-700);
}

.padding-block-900 {
    padding-block: var(--size-900);
}

@media (min-width: 50em) {
    .padding-left-600 {
        padding-left: var(--size-600);
    }
}

.margin-block-600 {
    margin-block: var(--size-600);
}

.margin-block-700 {
    margin-block: var(--size-700);
}

.margin-block-900 {
    margin-block: var(--size-900);
}

.margin-top-900 {
    margin-top: var(--size-900);
}

.padding-bottom-600 {
    padding-bottom: var(--size-600);
}

.padding-bottom-700 {
    padding-bottom: var(--size-700);
}

.padding-bottom-900 {
    padding-bottom: var(--size-900);
}