@font-face {
    font-family: "TimesNRSevenMTStd";
    src: url("TimesNRSevenMTStd.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TimesNRSevenMTStd";
    src: url("TimesNRSevenMTStd-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

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

html {
    /* Basisgrösse für rem-Berechnung: alle Textelemente nutzen 1rem = 20px */
    font-size: 23px;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    background: #000000;
    color: #FFFFFF;

    font-family: "TimesNRSevenMTStd", "Times New Roman", Times, serif;
    line-height: 1.3;
}

body {
    overflow: hidden;
}

main {
    width: 100vw;
    height: 100vh;

    position: relative;
}


/* Gemeinsame Basis für Text-Buttons/Overlays */

.fixed-text,
.overlay-text {
    position: fixed;

    color: #FFFFFF;
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height: 1.3;

    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    padding: 0;
    margin: 0;
}

/* Zeilenabstand 1.1 gilt einheitlich für alle Textelemente innerhalb
   von Header Typo / Info / Biografie Typo — auch für Leerzeilen (leere
   Absätze), damit sie dieselbe Höhe wie normale Textzeilen haben. */
.fixed-text p,
.overlay-text p,
.fixed-text br,
.overlay-text br {
    line-height: 1.3;
}

.overlay-text p:empty {
    margin: 0;
    min-height: 1.3em;
}

/* Abstand vor Zwischenüberschriften (z. B. "Selected Awards", "Selected
   Books") zentral steuerbar statt über gestapelte Leerzeilen */
.section-heading {
    margin-top: 2.6em;
}

.fixed-text {
    cursor: pointer;
}

.fixed-text a,
.overlay-text a {
    color: #FFFFFF;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: text-decoration-color 70ms ease-in-out;
}

.fixed-text a:hover,
.overlay-text a:hover,
.fixed-text a:focus-visible,
.overlay-text a:focus-visible {
    text-decoration-color: currentColor;
}

/* Für Inhalte, die dauerhaft unterstrichen bleiben sollen (kein Hover,
   kein Fade — im Gegensatz zur Link-Unterstreichung oben immer sichtbar) */
.unterstrichen {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

/* Sichtbarer Fokus-Zustand für Tastaturnutzung */
.fixed-text:focus-visible,
.overlay-text a:focus-visible {
    outline: 1px solid #FFFFFF;
    outline-offset: 4px;
}


/* Biografie Typo: sobald eingeblendet, Farben der ganzen Seite umkehren
   (weißer Hintergrund, schwarze Schrift/Links) */
body:has(#biografie-typo:not(.hidden)) {
    background: #FFFFFF;
    color: #000000;
}

body:has(#biografie-typo:not(.hidden)) .fixed-text,
body:has(#biografie-typo:not(.hidden)) .overlay-text {
    color: #000000;
}

body:has(#biografie-typo:not(.hidden)) .fixed-text a,
body:has(#biografie-typo:not(.hidden)) .overlay-text a {
    color: #000000;
}

body:has(#biografie-typo:not(.hidden)) .fixed-text:focus-visible,
body:has(#biografie-typo:not(.hidden)) .overlay-text a:focus-visible {
    outline-color: #000000;
}

body:has(#biografie-typo:not(.hidden)) .overlay-text::before {
    background: linear-gradient(to bottom, #FFFFFF 0%, transparent 100%);
}

body:has(#biografie-typo:not(.hidden)) .overlay-text::after {
    background: linear-gradient(to top, #FFFFFF 0%, transparent 100%);
}


/* Header Typo: Titel / Home-Button — bleibt auf der Startansicht sichtbar
   und klickbar und öffnet die Biografie Typo. Sobald die Biografie Typo
   eingeblendet ist, wird Header Typo ausgeblendet (die erste Zeile der
   Biografie Typo übernimmt denselben Home-Link). */

#header-typo {
    left: 15px;
    top: 15px;

    z-index: 2;
}

/* Wenn header-typo innerhalb von biografie-typo eingehängt ist (siehe
   slideshow.js, goHome()): aus dem fixed-Layout lösen und stattdessen
   als erste Zeile im normalen Textfluss des Overlays positionieren.
   Da biografie-typo selbst bei 15px/15px beginnt, landet header-typo
   dadurch exakt an derselben Stelle wie zuvor im fixed-Zustand — ohne
   sichtbaren Sprung beim Öffnen. */
#header-typo.in-bio {
    position: static;
    display: block;
    margin: 0 0 1.3em 0;
}

/* Verhindert doppelten Abstand: der Abstand zwischen header-typo und
   der ersten Zeile der Biografie wird ausschließlich über die
   margin-bottom von header-typo.in-bio gesteuert. */
#header-typo.in-bio + p {
    margin-top: 0;
}


/* Text B: Bildunterschrift / Info-Toggle */

#text-b {
    left: 15px;
    bottom: 15px;

    cursor: default;

    z-index: 1;
}


/* Overlay-Text: Biografie Typo sowie eigenständige Seiten (Impressum,
   Datenschutz) nutzen dasselbe Layout — immer 15px zum Rand, unabhängig
   vom Breakpoint. Die Biografie Typo startet ebenfalls bei 15px von
   oben, liegt aber hinter Header Typo. */

.overlay-text {
    left: 15px;
    top: 0;

    width: calc(100vw - 30px);
    max-height: 100vh;
    padding-top: 15px;
    padding-bottom: 15px;

    overflow-y: auto;

    z-index: 1;
}

/* Weicher Verlauf statt hartem Rand: Text, der oben/unten aus dem
   sichtbaren Bereich scrollt, blendet ins Schwarze über, statt hart
   abgeschnitten zu werden. Die Verlaufsflächen bleiben fixed und damit
   unabhängig vom Scroll-Zustand des darunterliegenden Textes. Sie
   sitzen jetzt am echten Seitenrand, da der Container selbst bis dort
   reicht. */
.overlay-text::before,
.overlay-text::after {
    content: "";
    position: fixed;
    left: 15px;
    right: 15px;
    height: 5px;
    pointer-events: none;
    z-index: 2;
}

.overlay-text::before {
    top: 0;
    background: linear-gradient(to bottom, #000000 0%, transparent 100%);
}

.overlay-text::after {
    bottom: 0;
    background: linear-gradient(to top, #000000 0%, transparent 100%);
}

/* Tabulator-Ausrichtung innerhalb der Biografie Typo (z. B. Auszeichnungsliste) */
.tabbed {
    white-space: pre;
    tab-size: 130px;
    -moz-tab-size: 130px;
}

/* Tabellenartige Ausrichtung von Auszeichnungen und Büchern per CSS-Grid
   statt Tabulatoren — funktioniert unabhängig von der Zeichenbreite der
   Schrift (wichtig bei proportionalen Schriften wie ABC Whyte). */
.tab-grid {
    display: grid;
    column-gap: 1.5em;
    row-gap: 0;
}

.awards-grid {
    grid-template-columns: auto auto 1fr;
}

.books-grid {
    grid-template-columns: auto 1fr;
}

.tab-grid span {
    line-height: 1.3;
}

.tab-grid .col-year,
.tab-grid .col-title {
    white-space: nowrap;
}

/* Hinweistext auf noch zu ergänzende Inhalte */
.todo {
    color: #ff6666;
    font-weight: bold;
}

.hidden {
    display: none;
}


/* Fehlermeldung */

.error-message {
    position: fixed;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100vw - 30px);
    font-size: 1rem;
    letter-spacing: 0.01em;
    line-height: 1.3;
}


/* Slideshow: proportionale Skalierung, 40px Abstand auf allen Seiten.
   Das Bild passt sich sowohl in der Breite als auch in der Höhe an und
   geht nie über den 40px-Rand hinaus. */

#slideshow {
    position: fixed;

    top: 60px;
    bottom: 60px;
    left: 60px;
    right: 60px;
    width: auto;
    height: auto;

    min-width: 0;
    min-height: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

/* picture selbst darf im Flex-Container nicht breiter/höher als der
   verfügbare Platz werden — sonst greift max-width/max-height am img
   nicht, weil Flex-Items standardmäßig nicht unter ihre intrinsische
   Größe schrumpfen (min-width/min-height: auto). */
#slideshow picture {
    display: flex;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}

#slide-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    object-fit: contain;

    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.fade {
    opacity: 0;
}

/* Bewegung reduzieren, falls vom System gewünscht */
@media (prefers-reduced-motion: reduce) {
    #slide-image {
        transition: none;
    }
}


/* Mobile */

@media (max-width: 1200px) {

    /* Einzug der Zeile "A lot of my work..." — via inline-block +
       text-indent, da der Satz per <br> mitten in einem <p> beginnt und
       kein eigener Absatz ist */
    .mobil-einzug {
        display: inline-block;
        text-indent: 1em;
    }

    #header-typo,
    #text-b {
        left: 15px;
    }

    #header-typo {
        top: 15px;
    }

    #text-b {
        bottom: 15px;
    }

    #slideshow {
        top: 30px;
        bottom: 30px;
        left: 30px;
        right: 30px;
        width: auto;
    }

    .overlay-text {
        left: 15px;
        width: calc(100vw - 30px);
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .overlay-text::before,
    .overlay-text::after {
        display: none;
    }

    /* Normale Absatzabstände = Zeilenabstand des Texts (1.3em) statt
       Browser-Standardabstand */
    .overlay-text p {
        margin-top: 1.3em;
        margin-bottom: 0;
    }

    /* Abstand vor Zwischenüberschriften auf Mobil: 2x Zeilenabstand
       (Selektor .overlay-text p.section-heading, damit die Regel die
       allgemeine .overlay-text-p-Absatzregel sicher überstimmt) */
    .overlay-text p.section-heading {
        margin-top: 2.6em;
    }

    /* Grid-Spalten (Jahr/Titel/Detail bzw. Jahr/Eintrag) auf Mobil nicht
       nebeneinander, sondern als eigene Zeilen untereinander darstellen */
    .tab-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .tab-grid .col-year,
    .tab-grid .col-title {
        white-space: normal;
    }

    /* Abstand vor Jahreszahlen (1. Spalte) = 1x Zeilenabstand */
    .tab-grid .col-year:not(:empty) {
        margin-top: 1.3em;
    }

    /* 2. Spalte (Titel bzw. Eintrag) mit Bulletpoint einrücken, kein
       zusätzlicher Abstand */
    .tab-grid .col-title,
    .tab-grid .col-entry {
        display: block;
        position: relative;
        padding-left: 1em;
        margin-top: 0;
    }

    .tab-grid .col-title::before,
    .tab-grid .col-entry::before {
        content: "•";
        position: absolute;
        left: 0;
    }

    /* 3. Spalte in der Awards-Section: Einzug = 1em, kein zusätzlicher
       Abstand, in Klammern gesetzt */
    .awards-grid .col-detail {
        padding-left: 1em;
        margin-top: 0;
    }

    .awards-grid .col-detail:not(:empty)::before {
        content: "(";
    }

    .awards-grid .col-detail:not(:empty)::after {
        content: ")";
    }


    /* Seitliche Begrenzung: Text darf nie über den rechten Rand
       hinausragen, auch nicht bei langen Wörtern/Links */
    .overlay-text,
    .fixed-text {
        overflow-x: hidden;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}