/* ========================================
   BAUREKA.PAPERS — ONE-PAGER
   ======================================== */

@charset "UTF-8";

/* ── Design tokens ── */
:root {
    --grey:   #606060;
    --accent: #90A3D9;
    --blue:   #3D59B6;
    --muted:  #cbcbcb;
    --dot:    #BAC8EB;
    --medium: #677EC8;

    --border:      3px solid var(--grey);
    --border-thin: 1px solid var(--grey);
    --shadow:    6px 6px 5px var(--dot);
    --shadow-sm: 4px 4px 5px var(--dot);
    --shadow-inset: inset 0px 10px 10px -6px var(--dot);


    --header-h: 60px;
    --pad:      24px;
}

/* ── Global ── */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--header-h);
    background: white;
    background-image: radial-gradient(var(--dot) 1px, transparent 0);
    background-size: 8px 8px;
    background-position: -6px -6px;
    color: var(--grey);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Oxygen-Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a { color: var(--blue); text-decoration: none; font-weight: 600; }
a:hover, a:focus { color: var(--accent); }


/* ========================================
   HEADER
   ======================================== */

#site-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border);
    box-shadow: 0 4px 15px rgba(144, 163, 217,.7);
    z-index: 1000;
    box-sizing: border-box;
    overflow: visible;
}

.bp-logo { display: flex; align-items: center; flex-shrink: 0; }
.bp-logo img { height: 44px; width: auto; }


/* ========================================
   NAV — desktop
   ======================================== */

#site-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0; padding: 0;
}

#nav-list li a {
    display: block;
    padding: 5px 10px;
    color: var(--grey);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: box-shadow .15s ease, color .15s ease;
    text-transform: uppercase;
}
#nav-list li a:hover,
#nav-list li a:focus {
    box-shadow: var(--shadow-sm);
    color: var(--blue);
    outline: none;
}

/* Burger — hidden on desktop */
#nav-toggle { display: none; }


/* ========================================
   NAV — mobile  (≤ 768 px)
   ======================================== */

@media (max-width: 1035px) {

    #nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        flex-shrink: 0;
        z-index: 1100;
    }
    #nav-toggle span {
        display: block;
        width: 100%;
        height: 2.5px;
        background: var(--grey);
        border-radius: 1px;
        transition: transform .22s ease, opacity .22s ease;
        transform-origin: center;
    }
    #nav-toggle.bp-open span:nth-child(1) { transform: translateY(8px)  rotate(45deg);  }
    #nav-toggle.bp-open span:nth-child(2) { opacity: 0; transform: scaleX(0);           }
    #nav-toggle.bp-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Panel — anchored at header bottom, unfolds downward via clip-path */
    #site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        background: white;
        border-bottom: var(--border);
        box-shadow: 0 8px 28px rgba(61,89,182,.14);
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
        transition: clip-path .28s cubic-bezier(.4,0,.2,1);
        z-index: 1050;
    }
    #site-nav.bp-open {
        clip-path: inset(0 0 0% 0);
        pointer-events: auto;
    }

    #nav-list {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: 6px 0;
    }
    #nav-list li a {
        padding: 13px 24px;
        font-size: 15px;
        background: transparent;
        border-bottom: 1px solid rgba(144,163,217,.18);
        white-space: normal;
        transition: background .15s ease, padding-left .15s ease;
    }
    #nav-list li:last-child a { border-bottom: none; }
    #nav-list li a:hover,
    #nav-list li a:focus {
        background: rgba(144,163,217,.08);
        padding-left: 32px;
        box-shadow: none;
        color: var(--blue);
    }
}


/* ========================================
   HERO
   ======================================== */

.bp-hero {
    position: relative;
    width: 100%;
    max-height: calc(100vh - var(--header-h));
    overflow: hidden;
    border-bottom: var(--border);
    margin-bottom: var(--header-h);
}

.bp-hero-overlay {
    position: absolute;
    z-index: 100;
    top: 63%;
    left: 44%;
    transform: translateY(-50%);
    margin: 0;
    width: 50vw;
    max-width: 1000px;
    min-width: 370.7px;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 0 50px 20px #fff;
    container-type: inline-size;
}
.bp-hero-overlay img { width: 100%; }
.bp-hero-overlay figcaption {
    color: black;
    text-transform: uppercase;
    font-size: 2.9cqi;
    font-weight: 500;
    margin-top: 15px;
    padding-top: 15px;
    letter-spacing: 0.12em;
    border-top: 2px solid black;
    text-align-last: justify;
}

/* Videos */
.bp-hero-videos {
    position: relative;
    width: 100%;
    background: white;
    overflow: hidden;
    min-height: 600px;
}
.bp-hero-fallback {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}
.bp-hero video {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}
#vid-datapaper {
    width: 38vw;
    padding-left: 3vw;
    float: left;
    filter: brightness(1);
    border-right: 2px dotted var(--grey);
}
#vid-datapaper.bp-playing  { opacity: 0.6;  }
#pointcloud-wrapper {
    width: 62vw;
    float: right;
}
#vid-pointcloud {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#vid-pointcloud.bp-playing { opacity: 0.65; }

.bp-hero video::-webkit-media-controls,
.bp-hero video::-webkit-media-controls-enclosure,
.bp-hero video::-webkit-media-controls-panel,
.bp-hero video::-webkit-media-controls-picture-in-picture-button { display: none; }


/* ========================================
   MAIN CONTENT
   ======================================== */

.content-wrapper {
    scroll-margin-top: 80px;
    flex: 1;
    width: 70vw;
    max-width: 1000px;
    min-width: 300px;
    margin: 0 auto 80px;
    padding: 36px 40px;
    background: white;
    border: var(--border);
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
}

/* Markdown typography */
#bp-content h1 {
    font-size: clamp(20px, 3.5vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--blue);
    margin-top: 48px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    scroll-margin-top: 105px;
}
#bp-content h1:first-child { margin-top: 0; }

#bp-content h2 {
    font-size: clamp(15px, 2vw, 22px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--blue);
    margin: 20px auto;
    letter-spacing: 0.03em;
}

#bp-content h2:not(h1 + h2) {
    margin-bottom: 10px;
}

#bp-content h3 {
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    margin-top: 24px;
    margin-bottom: 10px;
}

#bp-content p {
    font-size: clamp(13.5px, 1.6vw, 16px);
    line-height: 1.7;
    color: var(--grey);
    margin-bottom: 16px;
    hyphens: auto;
    text-align: justify;
    letter-spacing: 0.025em;
}
#bp-content p:last-child { margin-bottom: 0; }

#bp-content ul,
#bp-content ol {
    padding-left: 1.5em;
    margin-bottom: 16px;
}
#bp-content ul { list-style: disc; }
#bp-content ol { list-style: decimal; }
#bp-content li {
    font-size: clamp(13.5px, 1.6vw, 16px);
    line-height: 1.7;
    color: var(--grey);
    margin-bottom: 6px;
    letter-spacing: 0.025em;
}

#bp-content img {
    max-width: 100%;
    margin: 24px 0 9px 0;
}
#bp-content figure { margin: 24px 0; }
#bp-content figcaption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

#empfohlene-repositories img {
    max-height: 100px;
}

#empfohlene-repositories img:nth-of-type(1) {
    max-height: 120px;
}

#empfohlene-repositories img:last-of-type {
    max-height:90px;
}

@media (max-width: 480px) {
    #bp-content {
        width: 100%;
        min-width: unset;
        border-left: none;
        border-right: none;
        margin: 0 0 60px;
        padding: 24px var(--pad);
    }
    #cfp {
        position: relative;
        left: calc(var(--pad) * -1);
        box-shadow: var(--shadow-inset);
    }
    .content-wrapper {
        padding: 24px 12px;
        margin-left: 0;
        margin-right: 0;
        width: calc(100vw - 49px);
    }
    #bp-content p {
        letter-spacing: 0.05em;
        text-align: left;
    }
}


/* ========================================
   IMAGE GALLERY
   ======================================== */

.content-wrapper:has(.bp-gallery) {
    padding: 0;
    border: var(--border);
    overflow: hidden;
}

.bp-gallery {
    overflow-x: hidden;
    width: 100%;
}

.bp-gallery figcaption {
    padding: 4px 16px 0px 16px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.03em;
}

.bp-gallery-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: bp-gallery-scroll 40s linear infinite;
}

#cfp {
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
    max-width: unset;
    border-left: 0;
    border-right: 0;
    box-shadow: var(--shadow-inset);
}


.bp-gallery-track img {
    height: 300px;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    margin: 0;
    border: none;
}

@keyframes bp-gallery-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


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

#site-footer {
    background: white;
    border-top: var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 28px var(--pad);
    text-align: center;
}

.bp-footer-info {
    font-size: 12px;
    color: var(--muted);
}
.bp-footer-info a {
    color: var(--muted);
    font-weight: 400;
}
.bp-footer-info a:hover { color: var(--blue); }

.bp-footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}
.bp-footer-logos a { display: flex; align-items: center; }
.bp-footer-logos img {
    height: 36px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    opacity: .65;
    transition: opacity .15s ease;
}
.bp-footer-logos img[src*="rwth"] { height: 60px; max-width: 175px; }
.bp-footer-logos img:hover { opacity: 1; }

/* ========================================
    More Media
   ======================================== */

@media (max-width: 1035px) {
    #vid-pointcloud {display: none;}
    #vid-datapaper {border-right: 0; width: 100%;padding: 0 3vw;}
    #vid-datapaper.bp-playing  { opacity: 0.5;}
    .bp-hero-overlay {width: 60vw; transform: translateX(-50%); left: 50%;background: rgba(255,255,255,0.8);box-shadow: 0 0 50px 40px #fff;}
}

@media (max-width: 1035px) {
    .bp-hero-overlay figcaption {letter-spacing: 0.08em;}
}