:root {
    --petrol: #204B63;
    --rot: #E25046;
}


/* =========================
   GRUNDLAYOUT
   ========================= */

body {
    margin: 0;
    font-family: "ibm-plex-sans", sans-serif;
    color: var(--petrol);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem;
    font-weight: 500;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

a {
    color: var(--petrol);
    text-decoration: none;
}

nav img {
    width: 150px;
    height: auto;
    position: relative;
    top: -7px;
}

main {
    margin: 4rem 2rem 6rem;
    max-width: 1600px;
}

main h1 {
    font-size: 2rem;
    line-height: 1.1;
    margin: 1rem 0 0.5rem;
}

main section {
    margin-top: 3rem;
}

main ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}


/* =========================
   FORSCHUNGSJOURNAL
   ========================= */

.journal {
    width: 100%;
    margin-top: 6rem;
}

.journal-intro {
    margin-bottom: 3rem;
}

.journal-kicker {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.journal-intro h1 {
    margin: 0 0 0.75rem 0;
    font-size: 2.5rem;
    line-height: 1.05;
}

.journal-description {
    max-width: 1180px;
    margin: 0;
    line-height: 1.35;
}


/* Journal */

.journal-book {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 4rem 0 2rem;
}

.journal-book img {
    display: block;
    width: 100%;
    max-width: 1400px;
    height: auto;
    opacity: 1;
    transition: opacity 0.45s ease;
}


/* Seitennavigation */

.journal-navigation {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    font-size: 0.9rem;
}

.journal-page {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--petrol);
    font: inherit;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.journal-navigation span {
    color: var(--petrol);
    opacity: 0.35;
}

.journal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

.journal-page:hover,
.journal-page.active {
    opacity: 1;
}

.journal-pdf {
    display: inline-block;
    margin-top: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
}


/* =========================
   ARBEITEN
   ========================= */

.arbeiten {
    max-width: 1200px;
}

.arbeiten-intro {
    margin-bottom: 3rem;
}

.arbeiten-kicker {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.arbeiten-intro h1 {
    font-size: 1.8rem;
    margin: 0;
}

.arbeiten-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 5rem;
    align-items: start;
}

/* =========================================================
   PROJEKTÜBERSICHT – KACHELN
   ========================================================= */

.project-card {

    display: block;

    width: 100%;
    max-width: 360px;

    color: var(--petrol);
    text-decoration: none;
}


/* Bildfläche */

.project-card img,
.project-placeholder {

    display: block;

    width: 100%;
    height: 200px;

    object-fit: contain;

    box-sizing: border-box;

    border: 1px solid #d9dee1;
    border-radius: 6px;

    background: #fff;

    margin: 0 0 1.25rem 0;
}


/* =========================================================
   PROJEKT 02 – LADEN 2207
   Einheitlicher Kachelrahmen
   ========================================================= */

.project-card .project-cover-laden {
    width: 100%;
    height: 200px;

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

    box-sizing: border-box;

    border: 1px solid #d9dee1;
    border-radius: 6px;

    background: #fff;

    margin: 0 0 1.25rem 0;

    overflow: hidden;
}

.project-card .project-cover-laden img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border: none;
    border-radius: 0;

    margin: 0;
}


/* =========================================================
   PROJEKT 03 – PARADOX
   Drei Bilder gehören zu EINER Kachel
   ========================================================= */

.project-card .project-cover-paradox {

    width: 100%;
    height: 200px;

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

    box-sizing: border-box;

    border: 1px solid #d9dee1;
    border-radius: 6px;

    background: #fff;

    margin: 0 0 1.25rem 0;

    overflow: hidden;
}


.project-card .project-cover-paradox img {

    width: 33.333%;
    height: 100%;

    object-fit: contain;

    border: none;
    border-radius: 0;

    margin: 0;
}


/* =========================================================
   PROJEKTINFORMATION
   ========================================================= */

.project-info {

    padding: 0;
}


.project-info {
    width: 280px;
    margin-top: 1rem;
}

.project-number {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    color: #8aa0ad;
}

.project-info h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #8aa0ad;
}

.project-info p {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #aab8c0;
}


/* =========================
   PROJEKT 03 – PARADOX
   PROJEKTKACHEL AUF ARBEITEN
   ========================= */

.project-cover-paradox {
    position: relative;
    width: 280px;
    height: 210px;
    overflow: hidden;
    background: #ffffff;
}

.project-cover-paradox img {
    position: absolute;
    width: 115px;
    height: auto;
    object-fit: contain;
    display: block;
}


/* SINNFLUT – hinten */

.project-cover-paradox img:nth-child(1) {
    left: 18px;
    top: 18px;
    transform: rotate(-5deg);
}


/* PARADOX – Mitte */

.project-cover-paradox img:nth-child(2) {
    left: 83px;
    top: 8px;
    transform: rotate(2deg);
}


/* WIDERSPRUCH – vorne */

.project-cover-paradox img:nth-child(3) {
    right: 12px;
    bottom: -5px;
    transform: rotate(-4deg);
}


/* =========================
   PROJEKT 03 – PARADOX
   PROJEKTÜBERSICHT
   ========================= */

.paradox-page {
    color: var(--petrol);
}


/* Projektintro */

.paradox-intro {
    max-width: 760px;
    margin-top: 6rem;
}

.paradox-kicker {
    margin: 0 0 0.8rem 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.paradox-intro h1 {
    margin: 0;
    font-family: "ibm-plex-sans-condensed", sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.05;
}

.paradox-description {
    margin: 1rem 0 0 0;
    font-size: 1rem;
}

.paradox-meta {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: #8aa0ad;
}


/* =========================
   DIE DREI EXPONAT-KACHELN
   ========================= */

.paradox-exhibits {
    display: grid;
    grid-template-columns: repeat(3, 440px);
    gap: 4rem;
    margin-top: 6rem;
    align-items: start;
    max-width: 1500px;
}

.paradox-exhibit-card {
    display: block;
    color: var(--petrol);
    text-decoration: none;
    cursor: pointer;
}


/* PARADOX – dezentes Zittern beim Hover */

@keyframes paradox-zittern {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(-0.5px, 0.3px) rotate(-0.05deg); }
    50% { transform: translate(0.5px, -0.3px) rotate(0.05deg); }
    75% { transform: translate(-0.3px, 0.2px) rotate(-0.03deg); }
}

.paradox-exhibit-card img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
}

.paradox-exhibit-card:hover img {
    animation: paradox-zittern 0.35s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .paradox-exhibit-card:hover img {
        animation: none;
    }
}


.paradox-exhibit-title {
    margin-top: 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #8aa0ad;
}


/* =========================================================
   PARADOX – DETAILSEITE
   =========================================================

   LINKS:
   - Auswahlbilder der Diplomarbeit
   - Infobox

   RECHTS:
   - großes Exponat

   Das Grid liegt direkt auf .paradox-detail.
   ========================================================= */


/* =========================
   HAUPT-LAYOUT
   ========================= */

.paradox-detail {
    max-width: 1500px;
    margin-top: 8rem;

    display: grid;
    grid-template-columns: 520px 620px;
    column-gap: 6rem;

    align-items: start;
}


/* =========================
   DIPLOMARBEIT – VORSCHAU
   ========================= */

.paradox-preview {
    grid-column: 2;
    grid-row: 1;

    display: grid;
    grid-template-columns: repeat(5, 90px);
    grid-template-rows: 128px;

    gap: 0.6rem;

    width: max-content;
    height: 128px;

    align-items: stretch;
}

.paradox-preview img {
    display: block;

    width: 90px !important;
    height: 128px !important;

    min-width: 90px;
    min-height: 128px;
    max-width: 90px;
    max-height: 128px;

    object-fit: contain;

    border: 1px solid #d8e0e4;

    box-sizing: border-box;
}


/* =========================
   INFOBOX
   ========================= */

.paradox-content-card {
    grid-column: 3;
    grid-row: 1;

    width: 180px;
    margin-top: 8rem;

    padding: 0;
    border: none;
    background: transparent;
}


.paradox-content-description {
    margin: 0;

    font-size: 0.85rem;
    line-height: 1.4;

    color: var(--petrol);
}


.paradox-content-link {
    display: inline-block;

    margin-top: 1.3rem;

    font-size: 0.8rem;
    font-weight: 500;

    color: var(--petrol);
    text-decoration: none;
}

.paradox-content-link:hover {
    text-decoration: underline;
}


/* =========================
   GROSSES EXPONAT
   ========================= */

.paradox-detail-exhibit {
    grid-column: 2;
    grid-row: 1 / span 2;

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

    margin: 0;
    padding: 0;
}

.paradox-detail-exhibit img {
    display: block;

    width: 620px;
    max-width: 100%;
    height: auto;

    margin: 0;
}


/* =========================
   CV
   ========================= */

.cv-page nav {
    justify-content: flex-end;
}

.cv {
    position: relative;
    max-width: 1400px;
}

.cv-logo {
    display: block;
    width: 190px;
    height: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.2rem;
}

.cv-description {
    max-width: 680px;
    margin-top: 2.5rem;
}

.cv-description p {
    margin: 0;
}

.cv-quote {
    display: block;
    margin-top: 2.5rem !important;
    font-family: "spectral", serif;
    font-size: 1.15rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.5;
}

.cv-statement {
    margin-top: 4rem;
}

.cv-statement h2 {
    max-width: 720px;
    margin: 0;
    font-family: "ibm-plex-sans-condensed", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.cv-skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cv-skills-row {
    display: flex;
    align-items: center;
}

.cv-skills-row span {
    font-size: 0.9rem;
    padding-right: 1rem;
    margin-right: 1rem;
    border-right: 1px solid #8aa0ad;
}

.cv-skills-row span:last-child {
    border-right: none;
}

.cv-skills {
    margin-top: 5rem;
    max-width: 760px;
}

.cv-photo {
    position: absolute;
    top: 2rem;
    right: -20rem;
    width: 250px;
    height: auto;
}

.cv-download {
    position: absolute;
    right: -25rem;
    bottom: 0.1rem;
    font-size: 0.85rem;
    font-weight: 500;
}


/* =========================
   ZUR PERSON
   ========================= */

.person {
    max-width: 1200px;
    margin-top: 6rem;
}

.person-intro {
    margin-bottom: 4rem;
}

.person-kicker {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.person-intro h1 {
    margin: 0;
    font-family: "spectral", serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}


/* Hintergrund Kategorie ZUR PERSON */

.person-page main {
    background-image: url("Images/1920x1080px_Hintergrund_01.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}


/* =========================
   PERSON – KACHELN
   ========================= */

.person-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 4rem;
    align-items: start;
}

.person-card {
    position: relative;
    display: block;
    width: 280px;
    min-height: 250px;
    padding: 1.2rem;
    box-sizing: border-box;

    color: var(--petrol);
    text-decoration: none;

    border: 1px solid #c8d2d7;

    background:
        linear-gradient(
            rgba(32, 75, 99, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 75, 99, 0.025) 1px,
            transparent 1px
        );

    background-size: 20px 20px;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.person-card:hover {
    border-color: var(--petrol);
    transform: translateY(-3px);
}

.person-card-image {
    display: block;
    width: 140px;
    height: 140px;
    margin-top: 1.2rem;

    object-fit: cover;

    border-radius: 8px;
}

.person-card-meta {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: #8aa0ad;
    margin-bottom: 0.55rem;
}

.person-card-content {
    margin-top: 1.2rem;
}


.person-card h2 {
    margin: 0;
    font-family: "ibm-plex-sans-condensed", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.1;
    max-width: 240px;
    min-height: 3.2rem;
}

.person-card p {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #8aa0ad;
}


/* Technische Fußnote */

.person-note {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #8aa0ad;
}


/* =========================
   GEBRAUCHSANWEISUNG
   ========================= */

.manual {
    position: relative;
    max-width: 1500px;
    min-height: 1800px;
}

.manual-header {
    margin-bottom: 5rem;
}

.manual-kicker {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.manual-logo {
    display: block;
    width: 190px;
    height: auto;
    margin-bottom: 1.5rem;
}

.manual-header h1 {
    margin: 0;
    font-family: "ibm-plex-sans-condensed", sans-serif;
    font-size: 2rem;
    font-weight: 600;
}


/* Drei-Spalten-Raster */

.manual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 4rem;
    row-gap: 5rem;
}


/* Datenblatt-Blöcke */

.manual-section {
    margin: 0;
    padding: 0;
    max-width: 360px;
}

.manual-number {
    margin: 0 0 1rem 0;
    font-size: 0.8rem;
    color: #8aa0ad;
}

.manual-section h2 {
    margin: 0 0 1rem 0;
    font-family: "ibm-plex-sans-condensed", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
}

.manual-section h3 {
    margin: 1.2rem 0 0.3rem 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.manual-section p {
    margin: 0 0 0.8rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.manual-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.manual-section li {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
}


/* Schlusszitat */

.manual-quote {
    max-width: 650px;
    margin: 7rem 0 3rem 0;
    font-family: "spectral", serif;
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
}


/* Navigation dieser Seite bleibt rechts */

.manual-page nav {
    justify-content: flex-end;
}


/* Die letzten beiden Blöcke etwas nach oben ziehen */

.manual-section:nth-child(11),
.manual-section:nth-child(12) {
    position: relative;
    top: -15rem;
}


/* =========================
   HINTERGRUND GEBRAUCHSANWEISUNG
   ========================= */

.manual-background {
    position: fixed;

    top: 235px;
    left: 50%;

    width: 1920px;
    height: 1080px;

    transform: translateX(-50%);

    background-image: url("Images/ZUR PERSON/01_Gebrauchsanweisung/1920x1080px Vers1.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1920px 1080px;

    opacity: 0.55;

    pointer-events: none;
    z-index: 0;
}


/* Inhalt über dem Hintergrund */

.manual-header,
.manual-grid,
.manual-quote {
    position: relative;
    z-index: 1;
}

/* =========================
   PARADOX – INDIVIDUELLE
   EXPONAT-DARSTELLUNG
   ========================= */

.paradox-exhibit-paradox {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: center;
}

.paradox-exhibit-paradox img {
    display: block;
    width: 620px;
    height: auto;
    margin: 0;
}

/* =========================================================
   BEREICHS- UND PROJEKTNAVIGATION
   ========================================================= */

.section-navigation {
    display: flex;
    align-items: center;
    gap: 2.2rem;

    margin-top: 2.5rem;
    padding: 0 15px;

    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.section-navigation a {
    color: var(--petrol);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.section-navigation a:hover {
    opacity: 0.55;
}

.section-navigation a.active {
    font-weight: 500;
}


/* ---------------------------------------------------------
   PROJEKTNAVIGATION
   --------------------------------------------------------- */

.project-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    margin: 5rem 0 8rem;
    padding: 0;

    font-size: 0.68rem;
}

.project-navigation a {
    color: #8aa0ad;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.project-navigation a:hover {
    opacity: 0.55;
}

.project-navigation .project-next {
    text-align: right;
}

/* Keine mittlere Markierung:
   links und rechts bleiben die einzigen Navigationselemente. */
.project-navigation .project-center {
    display: none;
}


/* ---------------------------------------------------------
   WERKSTATT – eigene Unterbereiche
   --------------------------------------------------------- */

.workshop-navigation {
    display: flex;
    align-items: center;
    gap: 2.2rem;

    margin-top: 2.5rem;
    padding: 0 15px;

    font-size: 0.8rem;
}

.workshop-navigation a {
    color: var(--petrol);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.workshop-navigation a:hover {
    opacity: 0.55;
}

.workshop-navigation a.active {
    font-weight: 500;
}

/* =========================================================
   LADEN 2207 – AUSZUG / DOPPELSEITEN
   ========================================================= */

.laden-page .laden-excerpt-pages {
    width: min(88vw, 1400px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 20px;
    row-gap: 45px;
}


/* Einheitlicher Rahmen für jede Seite */

.laden-page .laden-excerpt-pages img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border: 1px solid #d9dee1;
    box-sizing: border-box;

    background: #fff;
}

.laden-page .laden-excerpt-info {
    width: min(88vw, 1400px);
    margin: 45px auto 150px;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
}

.laden-page .laden-excerpt-info p,
.laden-page .laden-excerpt-info a {
    margin: 0;
}
/* =========================================================
   LADEN 2207 – KAMPAGNENBILDER
   ========================================================= */

.laden-page .laden-section-header {
    width: min(88vw, 1400px);
    margin: 0 auto 1.5rem;
}

.laden-page .laden-section-header .laden-section-kicker {
    margin: 0;
}

.laden-page .laden-select-images {
    width: min(82vw, 1250px);
    margin: 0 auto;
}

.laden-page .laden-select-images img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* =========================================================
   PROJEKT 01 – KI (KENNEN)LERNEN
   ========================================================= */


/* =========================
   PROJEKTINTRO
   ========================= */

.journal-description {
    max-width: 900px;
    margin: 0;
    line-height: 1.35;
}


/* =========================
   SECTION-TEXTE
   ========================= */

.ki-section-kicker {
    margin: 0 0 1.5rem 0;

    font-size: 0.9rem;
    font-weight: 500;

    letter-spacing: 0;
}


/* =========================
   FORSCHUNGSJOURNAL
   ========================= */

.ki-journal {
    margin-top: 6rem;
}

.ki-journal-layout {
    display: grid;

    grid-template-columns: 220px minmax(0, 1fr);

    column-gap: 5rem;

    align-items: start;
}


/* Randnotiz */

.ki-journal-note {
    position: sticky;
    top: 2rem;

    display: flex;
    flex-direction: column;

    gap: 0.6rem;

    margin: 0;
    padding-top: 0.2rem;

    color: #718b99;

    font-size: 0.78rem;
    line-height: 1.45;
}

.ki-journal-note strong {
    display: block;

    color: var(--petrol);

    font-size: 0.98rem;
    line-height: 1.3;

    font-weight: 500;
}


/* Journal-Seiten */

.ki-journal-gallery {
    display: flex;
    flex-direction: column;

    gap: 5rem;

    width: 100%;
}

.ki-journal-gallery figure {
    width: min(1120px, 100%);

    margin: 0;
}

.ki-journal-gallery img {
    display: block;

    width: 100%;
    height: auto;

    border: 1px solid #d8e0e4;

    box-sizing: border-box;
}


/* =========================
   KI-GENERIERTE BILDER
   ========================= */

.ki-selected {
    margin-top: 9rem;
}

.ki-gallery {
    display: flex;
    flex-direction: column;

    gap: 5rem;

    align-items: center;
}

.ki-gallery figure {
    width: min(1120px, calc(100vw - 48px));

    margin: 0;
}

.ki-gallery img {
    display: block;

    width: 100%;
    height: auto;

    border: 1px solid #d8e0e4;

    box-sizing: border-box;
}


/* =========================
   MERKZETTEL
   ========================= */

.ki-notes {
    margin-top: 9rem;
}

.ki-notes-row {
    display: flex;

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

    gap: 4rem;

    margin-top: 2.5rem;

    padding: 1rem 2rem 2rem;
}

.ki-notes-row figure {
    width: min(300px, 30vw);

    margin: 0;
}

.ki-notes-row figure:first-child {
    transform: rotate(-3deg);
}

.ki-notes-row figure:last-child {
    transform: rotate(2.5deg);
}

.ki-notes-row img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================
   TIEFERER EINBLICK
   ========================= */

.ki-excerpt {
    margin-top: 10rem;
    margin-bottom: 8rem;
}

.ki-pdf-card {
    display: block;

    width: min(420px, 70vw);

    margin: 3rem auto 0;

    border: 1px solid #d8e0e4;

    box-sizing: border-box;

    text-decoration: none;

    transition:
        border-color 0.25s ease,
        transform 0.25s ease;
}

.ki-pdf-card img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}

.ki-pdf-card:hover {
    border-color: var(--petrol);

    transform: translateY(-3px);
}

.ki-pdf-link {
    display: block;

    width: fit-content;

    margin: 1rem auto 0;

    color: var(--petrol);

    font-size: 0.85rem;
    font-weight: 500;

    text-decoration: none;
}

.ki-pdf-link:hover {
    text-decoration: underline;
}

/* =========================
   RESPONSIVE – PROJEKT 01
   ========================= */

@media (max-width: 900px) {

    .ki-journal-layout {
        grid-template-columns: 1fr;

        row-gap: 2rem;
    }

    .ki-journal-note {
        position: static;

        max-width: 500px;
    }

    .ki-journal-gallery,
    .ki-gallery {
        gap: 3rem;
    }

    .ki-journal-gallery figure,
    .ki-gallery figure {
        width: calc(100vw - 32px);
    }

}


@media (max-width: 560px) {

    .ki-notes-row {
        flex-direction: column;

        align-items: center;

        gap: 2.5rem;
    }

    .ki-notes-row figure {
        width: min(280px, 72vw);
    }

    .ki-notes-row figure:first-child {
        transform: rotate(-2.5deg);
    }

    .ki-notes-row figure:last-child {
        transform: rotate(2deg);
    }

    .ki-pdf-preview iframe {
        height: 560px;
    }

}



@media (max-width: 700px) {

    .project-navigation {
        flex-direction: column;
        align-items: flex-start;

        gap: 1rem;
    }

}

/* =========================================================
   NACH OBEN
   ========================================================= */

.back-to-top {
    position: fixed;

    right: 2rem;
    bottom: 2rem;

    z-index: 1000;

    width: 34px;
    height: 34px;

    border: none;
    background: transparent;

    color: var(--petrol);

    font-family: inherit;
    font-size: 1.1rem;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.back-to-top.visible {
    opacity: 0.45;
    visibility: visible;
}

.back-to-top:hover {
    opacity: 1;
}


@media (max-width: 700px) {

    .back-to-top {
        right: 1rem;
        bottom: 1rem;
    }

}

/* =========================================================
   PROJEKT 03 – EXPONAT-DETAILSEITEN
   Letzte Aktualisierung – sauberes 3-Spalten-Raster
   ========================================================= */


/* =========================
   PROJEKT / EXPONAT – KOPF
   ========================= */

.paradox-detail-header {
    width: 100%;
    max-width: none;

    margin: 0;
    padding-top: 4rem;
    padding-bottom: 5rem;
}

.paradox-project-title {
    display: block;

    color: var(--petrol);
    font-family: "spectral", serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.3;

    text-decoration: none;
}

.paradox-project-title:hover {
    opacity: 0.65;
}

.paradox-exhibit-heading {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 330;
    letter-spacing: 0.06em;
}


/* =========================
   DETAILBEREICH
   =========================

   links  = Vorschaubilder
   mitte  = großes Exponat
   rechts = redaktioneller Hinweis

   Die drei Bereiche haben eigene Spalten.
   Dadurch können die Vorschaubilder niemals
   über das Exponat rutschen.
   */

.paradox-detail-body {
    display: grid;

    grid-template-columns: 500px 620px 180px;
    column-gap: 150px;

    align-items: start;

    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================
   DIPLOMARBEIT – VORSCHAU
   ========================= */

.paradox-detail-body .paradox-preview {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    flex-wrap: wrap;

    gap: 0.6rem;

    width: 500px;
    height: auto;

    align-content: flex-start;
    align-items: flex-start;
}

.paradox-detail-body .paradox-preview img {
    display: block;

    width: 90px !important;
    height: 128px !important;

    min-width: 90px;
    min-height: 128px;
    max-width: 90px;
    max-height: 128px;

    object-fit: contain;

    border: 1px solid #d8e0e4;
    box-sizing: border-box;
}


/* =========================
   GROSSES EXPONAT
   ========================= */

.paradox-detail-body .paradox-detail-exhibit {
    grid-column: 2;
    grid-row: 1;

    justify-self: center;

    width: 620px;

    margin: 0;
    padding: 0;
}

.paradox-detail-body .paradox-detail-exhibit img {
    display: block;

    width: 620px;
    max-width: 100%;
    height: auto;

    margin: 0;
}


/* =========================
   REDAKTIONELLER HINWEIS
   ========================= */

.paradox-detail-body .paradox-content-card {
    grid-column: 3;
    grid-row: 1;

    align-self: end;
    justify-self: start;

    width: 180px;

    margin: 0;
    padding: 0;

    border: none;
    background: transparent;

    color: var(--petrol);
}

.paradox-content-kicker {
    margin: 0 0 0.8rem;

    font-family: "spectral", serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.paradox-content-description {
    margin: 0;

    font-size: 0.78rem;
    line-height: 1.45;
}

.paradox-content-link {
    display: inline-block;

    margin-top: 1.2rem;

    color: var(--petrol);
    font-size: 0.78rem;
    font-weight: 500;

    text-decoration: none;
}

.paradox-content-link:hover {
    opacity: 0.55;
}


/* =========================
   EXPONAT-NAVIGATION
   Nur diese Navigation
   ========================= */

.paradox-page #exponat-navigation.project-navigation {
    display: flex;

    width: 620px;
    max-width: calc(100vw - 4rem);

    margin: 6rem auto 8rem;
    padding: 1.2rem 0;

    border-top: 1px solid #d8e0e4;

    justify-content: space-between;
    align-items: center;

    /* gleicht die linke Vorschauspalt aus */
    transform: translateX(160px);
}



/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1500px) {

    .paradox-detail-body {
        grid-template-columns: 420px 620px 180px;
        column-gap: 60px;
    }

    .paradox-detail-body .paradox-preview {
        width: 420px;
    }

    .paradox-page #exponat-navigation.project-navigation {
        transform: translateX(0);
    }
}


@media (max-width: 1100px) {

    .paradox-detail-body {
        grid-template-columns: 1fr;

        width: 100%;
        max-width: none;

        margin: 0;

        row-gap: 3rem;

        justify-items: center;
    }

    .paradox-detail-body .paradox-preview {
        grid-column: 1;
        grid-row: 1;

        width: min(500px, calc(100vw - 4rem));
    }

    .paradox-detail-body .paradox-detail-exhibit {
        grid-column: 1;
        grid-row: 2;

        width: min(620px, calc(100vw - 4rem));
    }

    .paradox-detail-body .paradox-detail-exhibit img {
        width: 100%;
    }

    .paradox-detail-body .paradox-content-card {
        grid-column: 1;
        grid-row: 3;

        justify-self: center;

        width: min(620px, calc(100vw - 4rem));

        margin: 0;
    }

    .paradox-page #exponat-navigation.project-navigation {
        width: min(620px, calc(100vw - 4rem));

        transform: none;
    }
}

/* =========================================================
   LADEN 2207 – KOMPLETTE DOKUMENTATION
   ========================================================= */

.laden-page .laden-complete {
    width: min(1120px, calc(100vw - 4rem));
    margin: 2rem auto 0;

    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.laden-page .laden-complete a {
    color: var(--petrol);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.laden-page .laden-complete a:hover {
    opacity: 0.55;
}

.laden-page .laden-complete + .project-navigation {
    margin-top: 1.5rem;
}


/* Mehr Abstand zwischen Projektkacheln und Footer auf der Arbeiten-Übersicht */
.arbeiten-page .site-footer {
    margin-top: 10rem;
}

/* =========================
   RECHTLICHES / FOOTER
   ========================= */

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin: 6rem 2rem 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(32, 75, 99, 0.18);
    font-size: 0.78rem;
    line-height: 1.3;
}

.site-footer-links {
    display: flex;
    gap: 1.5rem;
}

.site-footer a {
    color: var(--petrol);
    text-decoration: none;
}

.site-footer a:hover {
    opacity: 0.55;
}

.legal-page .legal-content {
    max-width: 900px;
    margin: 4rem 2rem 6rem;
}

.legal-page .legal-kicker {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.legal-page .legal-content h1 {
    margin: 0 0 4rem;
    font-size: 2.5rem;
    line-height: 1.05;
}

.legal-page .legal-content section {
    margin: 0 0 3rem;
}

.legal-page .legal-content h2 {
    margin: 0 0 1rem;
    font-family: "ibm-plex-sans", sans-serif;
    font-size: 1.05rem;
    line-height: 1.2;
}

.legal-page .legal-content p {
    max-width: 760px;
    margin: 0 0 1rem;
    font-family: "spectral", serif;
    font-size: 1rem;
    line-height: 1.5;
}

.legal-page .legal-content a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.legal-page .legal-date {
    margin-top: 4rem;
    opacity: 0.6;
    font-size: 0.85rem !important;
}

@media (max-width: 700px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .site-footer-links {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .legal-page .legal-content {
        margin: 3rem 1.5rem 5rem;
    }
}


/* =========================
   START
   ========================= */

.home-main {
    min-height: 58vh;
    margin-top: 2rem;
    margin-bottom: 0;
}

.home-intro {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
}

.home-mark-wrap {
    width: min(520px, 55vw);
    max-width: 520px;
}

.home-video {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

.home-claim {
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

/* =========================
   WERKSTATT
   ========================= */

.werkstatt {
    max-width: 1200px;
    margin-top: 6rem;
}

.werkstatt-intro {
    margin-bottom: 4rem;
}

.werkstatt-kicker,
.werkstatt-detail-kicker {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.werkstatt-intro h1,
.werkstatt-detail h1 {
    margin: 0;
    font-family: "ibm-plex-sans-condensed", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

.werkstatt-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 5rem;
    align-items: start;
}

.werkstatt-card {
    display: block;
    width: 280px;
    color: var(--petrol);
    text-decoration: none;
}

.werkstatt-card img {
    display: block;
    width: 280px;
    height: 200px;
    object-fit: cover;
    box-sizing: border-box;
    border: 1px solid #d9dee1;
    border-radius: 6px;
    background: #fff;
    transition: opacity 0.25s ease, transform 0.2s ease;
}

.werkstatt-card:hover img {
    opacity: 0.82;
    transform: translateY(-2px);
}

.werkstatt-card-info {
    margin-top: 1rem;
}

.werkstatt-number {
    display: block;
    font-size: 0.85rem;
    color: #8aa0ad;
    margin-bottom: 0.4rem;
}

.werkstatt-card h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #8aa0ad;
}

.werkstatt-card p {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #aab8c0;
}

.werkstatt-detail {
    max-width: 1200px;
    margin-top: 6rem;
}

.werkstatt-detail-lead {
    max-width: 700px;
    margin: 1rem 0 4rem;
    line-height: 1.4;
}

.werkstatt-video {
    display: block;
    width: min(1200px, 100%);
    height: auto;
    background: #fff;
    border: 1px solid #d9dee1;
    border-radius: 6px;
}

.werkstatt-gallery {
    display: grid;
    gap: 2rem;
    margin-top: 4rem;
}

.werkstatt-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d9dee1;
    border-radius: 6px;
    box-sizing: border-box;
}

.werkstatt-gallery-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.anti-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.baba-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.baba-meta {
    display: flex;
    gap: 2.5rem;
    margin-top: -2rem;
    margin-bottom: 3rem;
    font-size: 0.8rem;
    color: #8aa0ad;
    letter-spacing: 0.03em;
}

@media (max-width: 1000px) {
    .werkstatt-grid {
        grid-template-columns: repeat(2, 280px);
    }
}

@media (max-width: 700px) {
    .home-main,
    .home-intro {
        min-height: 55vh;
    }

    .home-mark-wrap {
        width: min(520px, 82vw);
    }

    .werkstatt-grid,
    .werkstatt-gallery-four,
    .anti-gallery,
    .baba-gallery {
        grid-template-columns: 1fr;
    }

    .werkstatt-card {
        width: min(100%, 360px);
    }

    .werkstatt-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .baba-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Werkstatt-Projektnavigation – gleiche Bedienlogik wie bei Arbeiten */
#exponat-navigation.project-navigation {
    scroll-margin-top: 2rem;
}

.werkstatt-detail-page #exponat-navigation.project-navigation {
    transform: none;
}

/* =========================================================
   LÜGEN IM WELTALL
   ========================================================= */

/* Zwei Illustrationen – gleiche Höhe */

.raum-image-grid {
    width: fit-content;
    margin: 6rem auto 0;

    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

.raum-image-card {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;

    display: flex;
    align-items: flex-start;
}

.raum-image-card img {
    display: block;

    height: 520px;
    width: auto;

    max-width: none;

    border: none;
    border-radius: 0;
}


/* PDF-Link – wie bei Laden */

.raum-complete {
    width: min(1120px, calc(100vw - 4rem));

    margin: 1.5rem auto 0;

    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.raum-complete a {
    color: var(--petrol);

    font-size: 0.9rem;
    font-weight: 500;

    text-decoration: none;
}

.raum-complete a:hover {
    opacity: 0.55;
}


/* Abstand zwischen PDF-Link und Projektnavigation */

.raum-complete + .project-navigation {
    margin-top: 1.5rem;
}

/* Projektnavigation – sans serif wie übrige Navigation */
.paradox-page .project-navigation a {
    font-family: "ibm-plex-sans", sans-serif;
}

/* =========================================
   ILLUSTRES – ILLUSTRATIONEN
   ========================================= */

.illu-exhibits {
    width: 100%;
    max-width: 1180px;
    margin: 6rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem 5rem;
}

.illu-image {
    margin: 0;
    padding: 0;
}

.illu-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Projektnavigation – IBM Plex Sans */
#exponat-navigation.project-navigation a {
    font-family: "ibm-plex-sans", sans-serif;
}

.slide {
    display: none;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.slide.active {
    display: block;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* =========================================================
   LETZTE CV-KORREKTUR
   TUFTE-HINTERGRUND + PDF-LINK
   ========================================================= */


/* =========================
   CV – HINTERGRUND
   ========================= */

/* Hintergrund direkt auf der CV-Seite */

body.cv-page {
    position: relative;
    background-image: url("04_CV/Hintergrund_01.png") !important;
    background-repeat: no-repeat !important;
    background-position: center 235px !important;
    background-size: 1920px 1080px !important;
}


/* vorhandene Hintergrund-Ebene deaktivieren,
   damit kein zweites Hintergrundbild darüberliegt */

.cv-background {
    display: none !important;
}


/* =========================
   CV – INHALT
   ========================= */

.cv {
    position: relative;
    z-index: 1;
}


/* =========================
   CV – FOTO
   ========================= */

.cv-photo {
    z-index: 2;
}


/* =========================
   CV – PDF-LINK
   ========================= */

.cv-download {
    position: static !important;

    display: inline-block;

    margin-top: 1.5rem;

    color: var(--petrol);

    font-size: 0.85rem;
    font-weight: 500;

    text-decoration: none;
}

.cv-download:hover {
    opacity: 0.55;
}

/* =========================================================
   CV – FOTO RESPONSIV FIX
   ========================================================= */

.cv-photo {
    position: absolute;

    top: 2rem;
    right: 0;

    width: 250px;
    height: auto;
}


/* Bei schmaleren Fenstern etwas kleiner */

@media (max-width: 1100px) {

    .cv-photo {
        width: 210px;
        right: 0;
    }

}


/* Wenn es wirklich eng wird:
   Foto aus dem absoluten Layout nehmen */

@media (max-width: 800px) {

    .cv-photo {
        position: relative;

        top: auto;
        right: auto;

        display: block;

        width: 220px;

        margin: 3rem 0 0 auto;
    }

}
/* =========================================================
   HOMEPAGE V1.1 – RESPONSIVE / NAVIGATION / PRÄSENTATION
   ========================================================= */

/* Einheitliche Kachelbreite auf allen Hauptübersichten */
.arbeiten-grid,
.werkstatt-grid,
.person-grid {
    width: 100%;
}

/* Orientierungstext unter der Überschrift */
.section-lead {
    max-width: 760px;
    margin: 1rem 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--petrol);
}

/* Hauptnavigation darf auf kleinen Displays umbrechen */
@media (max-width: 760px) {
    nav {
        margin: 1.25rem 1rem 0;
        gap: 1rem;
        align-items: flex-start;
    }

    nav img {
        width: 112px;
        top: -3px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.55rem 1rem;
        font-size: 0.78rem;
        line-height: 1.2;
    }

    main {
        margin: 3rem 1rem 5rem;
    }

    .arbeiten,
    .werkstatt,
    .person {
        width: 100%;
        max-width: none;
        margin-top: 3rem;
    }

    .arbeiten-intro,
    .werkstatt-intro,
    .person-intro {
        margin-bottom: 2.5rem;
    }

    .section-lead {
        max-width: 100%;
        font-size: 0.9rem;
    }

    /* Alle drei Haupt-Kachelraster: eine Spalte */
    .arbeiten-grid,
    .werkstatt-grid,
    .person-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .project-card,
    .werkstatt-card,
    .person-card {
        width: min(100%, 420px);
        max-width: 420px;
    }

/* Bildkacheln proportional auf Mobile */

.project-card img,
.werkstatt-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
}

/* ARBEITEN: vollständige Darstellung */
.project-card img {
    object-fit: contain;
}

/* WERKSTATT: Bildfläche darf ausgefüllt werden */
.werkstatt-card img {
    object-fit: cover;
}

    .project-cover-paradox {
        position: relative;
        overflow: hidden;
    }

    .project-cover-paradox img {
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain;
    }

    .project-info {
        width: 100%;
        max-width: none;
    }

    .person-card {
        min-height: 0;
        aspect-ratio: auto;
    }

    .person-card-content {
        margin-top: 3.5rem;
    }

    .person-note {
        flex-wrap: wrap;
        gap: 0.6rem 1.2rem;
    }
}

/* Präsentation: Pfeile als echte Touch-Buttons */
.presentation {
    position: relative;
}

.presentation-slide-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 46px;
    height: 46px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: var(--petrol);

    font: inherit;
    font-size: 1.35rem;
    line-height: 1;

    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    box-shadow: 0 1px 8px rgba(32, 75, 99, 0.12);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.presentation-slide-button:hover {
    opacity: 0.72;
}

.presentation-slide-button:active {
    transform: translateY(-50%) scale(0.96);
}

.presentation-slide-button.prev {
    left: 12px;
}

.presentation-slide-button.next {
    right: 12px;
}

.presentation-slide-button:focus-visible {
    outline: 2px solid var(--petrol);
    outline-offset: 3px;
}

.presentation-controls {
    position: relative;
}

@media (max-width: 700px) {
    .presentation-page {
        padding: 25px 1rem 55px;
    }

    .presentation-slide-button {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.9);
    }

    .presentation-slide-button.prev {
        left: 8px;
    }

    .presentation-slide-button.next {
        right: 8px;
    }

    .presentation-controls {
        gap: 1rem;
        flex-wrap: wrap;
        font-size: 0.75rem;
    }

    .presentation-help {
        max-width: 70%;
    }

    .project-navigation {
        position: relative;
        margin-top: 4rem;
        padding: 1.25rem 0 3rem;
    }

    .project-navigation .project-center {
        position: static;
        transform: none;
        order: -1;
        align-self: center;
    }
}