/*
Theme Name: BEGEMOT
Theme URI: https://www.begemot.de
Author: BEGEMOT
Description: Technisches WordPress-Theme für Projekte, Systeme und Entwicklungen.
Version: 1.0
Text Domain: begemot
*/


/* =========================================================
   GRUNDLAGEN
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0b0f14;
    color: #e8edf2;
    line-height: 1.6;
}

.container {
    width: min(1180px, 90%);
    margin: 0 auto;
}


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

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(11, 15, 20, 0.95);

    border-bottom: 1px solid #202832;
}

.nav {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    color: #ffffff;
    text-decoration: none;

    font-size: 1.4rem;
    font-weight: 700;

    letter-spacing: 0.15em;
}

nav {
    display: flex;
    gap: 28px;
}

nav a {
    color: #aeb8c2;
    text-decoration: none;

    font-size: 0.9rem;

    transition: color 0.2s;
}

nav a:hover {
    color: #ffffff;
}


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

.hero {
    min-height: 75vh;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #202832;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(70, 120, 180, 0.15),
            transparent 40%
        );
}

.eyebrow {
    color: #7f9dbb;

    font-size: 0.8rem;

    letter-spacing: 0.2em;

    margin-bottom: 25px;
}

h1 {
    font-size: clamp(2.6rem, 6vw, 5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;

    max-width: 900px;
}

.hero-text {
    max-width: 680px;

    margin-top: 30px;

    font-size: 1.15rem;

    color: #aeb8c2;
}

.button {
    display: inline-block;

    margin-top: 35px;

    padding: 13px 24px;

    border: 1px solid #66798c;

    border-radius: 4px;

    color: #ffffff;

    text-decoration: none;

    transition: 0.2s;
}

.button:hover {
    background: #ffffff;

    color: #0b0f14;
}


/* =========================================================
   ABSCHNITTE
   ========================================================= */

.section {
    padding: 110px 0;
}

.section-dark {
    background: #10161d;
}

.section-heading {
    display: flex;

    align-items: baseline;

    gap: 18px;

    margin-bottom: 25px;
}

.section-heading span {
    color: #65788a;

    font-size: 0.8rem;
}

h2 {
    font-size: 2.5rem;

    letter-spacing: -0.03em;
}

.intro {
    color: #9da8b3;

    margin-bottom: 50px;
}


/* =========================================================
   PROJEKT-KARTEN
   ========================================================= */

.cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.card {
    padding: 30px;

    min-height: 260px;

    border: 1px solid #28323c;

    background: #0f141a;

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

.card:hover {
    transform: translateY(-4px);

    border-color: #60788e;
}

.card-number {
    color: #596b7b;

    font-size: 0.8rem;

    margin-bottom: 35px;
}

.card h3 {
    font-size: 1.35rem;

    margin-bottom: 15px;
}

.card p {
    color: #9da8b3;

    font-size: 0.95rem;
}

.card a {
    display: inline-block;

    margin-top: 25px;

    color: #b9c9d8;

    text-decoration: none;

    font-size: 0.9rem;
}


/* =========================================================
   SYSTEME
   ========================================================= */

.system-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    background: #29333d;

    margin-top: 50px;
}

.system-grid > div {
    padding: 35px;

    background: #10161d;
}

.system-grid h3 {
    margin-bottom: 12px;
}

.system-grid p {
    color: #9da8b3;
}


/* =========================================================
   TECHNOLOGIEN
   ========================================================= */

.technology-list {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 40px;
}

.technology-list a {
    padding: 10px 16px;

    border: 1px solid #2c3742;

    color: #aeb8c2;

    font-size: 0.9rem;

    text-decoration: none;

    transition: 0.2s;
}

.technology-list a:hover {
    color: #ffffff;

    border-color: #60788e;
}

/* =========================================================
   KONTAKT
   ========================================================= */

.contact {
    border-top: 1px solid #202832;
}

.contact p {
    color: #9da8b3;
}


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

.footer {
    padding: 40px 0;

    border-top: 1px solid #202832;

    color: #7e8994;

    font-size: 0.85rem;
}

.footer .container {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

.footer strong {
    color: #dce3e9;
}

.footer p {
    margin-top: 4px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .nav {
        flex-direction: column;

        gap: 15px;

        padding: 18px 0;
    }

    nav {
        gap: 15px;

        flex-wrap: wrap;

        justify-content: center;
    }

    .hero {
        min-height: 70vh;
    }

    .section {
        padding: 75px 0;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .system-grid {
        grid-template-columns: 1fr;
    }

    .footer .container {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }
}
/* =========================================================
   PROJEKTSEITE
   ========================================================= */

.project-page {
    padding: 100px 0;
}

.project-header {
    max-width: 900px;
    margin-bottom: 50px;
}

.project-header h1 {
    margin-top: 10px;
}

.project-intro {
    max-width: 700px;

    margin-top: 30px;

    font-size: 1.2rem;

    color: #aeb8c2;
}

.project-image {
    max-width: 1000px;

    margin-bottom: 60px;
}

.project-featured-image {
    display: block;

    width: 100%;
    height: auto;

    border: 1px solid #28323c;
}

.project-content {
    max-width: 850px;

    font-size: 1.05rem;

    color: #c3ccd4;
}

.project-content h2 {
    margin-top: 55px;
    margin-bottom: 20px;

    font-size: 2rem;
}

.project-content h3 {
    margin-top: 40px;
    margin-bottom: 15px;

    font-size: 1.4rem;
}

.project-content p {
    margin-bottom: 20px;
}

.project-content ul,
.project-content ol {
    margin: 20px 0 30px 25px;
}

.project-content li {
    margin-bottom: 8px;
}

.project-content a {
    color: #b9c9d8;
}

.project-back {
    margin-top: 70px;

    padding-top: 30px;

    border-top: 1px solid #28323c;
}

.project-back a {
    color: #aeb8c2;

    text-decoration: none;
}

.project-back a:hover {
    color: #ffffff;
}


/* Mobile */

@media (max-width: 800px) {

    .project-page {
        padding: 70px 0;
    }

    .project-header h1 {
        font-size: 2.8rem;
    }

    .project-content {
        font-size: 1rem;
    }

}

/* =========================================================
   PROJEKTINFORMATIONEN
   ========================================================= */

.project-details {
    max-width: 850px;

    margin-top: 70px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    background: #29333d;
}

.project-detail {
    padding: 30px;

    background: #10161d;
}

.project-detail h3 {
    margin-bottom: 15px;

    font-size: 1.1rem;
}

.project-detail p {
    color: #9da8b3;

    white-space: normal;
}

.project-status {
    color: #c3d2df !important;

    font-weight: 600;
}


/* Mobile */

@media (max-width: 800px) {

    .project-details {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PROJEKTÜBERSICHT
   ========================================================= */

.project-archive {
    padding: 100px 0;
}

.project-archive .section-heading {
    margin-bottom: 25px;
}

.project-archive h1 {
    font-size: 3.2rem;
}


/* Projekt-Raster */

.project-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;

    margin-top: 55px;
}


/* Karte */

.project-card {
    background: #0f141a;

    border: 1px solid #28323c;

    overflow: hidden;

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

.project-card:hover {
    transform: translateY(-5px);

    border-color: #60788e;
}


/* Bild */

.project-card-image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #151c23;
}

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

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;
}

.project-card:hover .project-card-image img {
    transform: scale(1.03);
}


/* Platzhalter */

.project-card-placeholder {
    display: flex;

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

    color: #536575;

    font-size: 0.8rem;

    letter-spacing: 0.2em;
}


/* Inhalt */

.project-card-content {
    padding: 28px;
}

.project-card-content h2 {
    margin-bottom: 15px;

    font-size: 1.4rem;
}

.project-card-content h2 a {
    color: #e8edf2;

    text-decoration: none;
}

.project-card-content p {
    color: #9da8b3;

    font-size: 0.95rem;
}


/* Link */

.project-card-link {
    display: inline-block;

    margin-top: 25px;

    color: #b9c9d8;

    text-decoration: none;

    font-size: 0.9rem;
}

.project-card-link:hover {
    color: #ffffff;
}


/* Pagination */

.nav-links {
    display: flex;

    gap: 10px;

    margin-top: 55px;
}

.nav-links a,
.nav-links span {
    padding: 8px 14px;

    border: 1px solid #28323c;

    color: #aeb8c2;

    text-decoration: none;
}

.nav-links .current {
    color: #ffffff;

    border-color: #60788e;
}


/* Mobile */

@media (max-width: 900px) {

    .project-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .project-archive {
        padding: 70px 0;
    }

    .project-archive h1 {
        font-size: 2.8rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   TECHNOLOGIE-SEITEN
   ========================================================= */

.technology-page {
    padding: 100px 0;
}

.technology-header {
    max-width: 850px;

    margin-bottom: 80px;
}

.technology-header h1 {
    margin-top: 10px;
}

.technology-description {
    margin-top: 30px;

    color: #aeb8c2;

    font-size: 1.1rem;
}

.technology-section {
    margin-bottom: 100px;
}

.technology-section .section-heading {
    margin-bottom: 40px;
}


/* Mobile */

@media (max-width: 800px) {

    .technology-page {
        padding: 70px 0;
    }

}

/* =========================================================
   TECHNOLOGIE-ÜBERSICHT
   ========================================================= */

.technology-overview {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


.technology-overview-card {
    display: block;

    padding: 30px;

    min-height: 220px;

    background: #0f141a;

    border: 1px solid #28323c;

    color: #e8edf2;

    text-decoration: none;

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


.technology-overview-card:hover {
    transform: translateY(-4px);

    border-color: #60788e;
}


.technology-number {
    color: #596b7b;

    font-size: 0.8rem;

    margin-bottom: 35px;
}


.technology-overview-card h2 {
    font-size: 1.35rem;

    margin-bottom: 15px;
}


.technology-overview-card p {
    color: #9da8b3;

    font-size: 0.95rem;
}


.technology-link {
    display: inline-block;

    margin-top: 25px;

    color: #b9c9d8;

    font-size: 0.9rem;
}


.technology-overview-card:hover
.technology-link {
    color: #ffffff;
}


/* Mobile */

@media (max-width: 900px) {

    .technology-overview {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .technology-overview {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   STATISCHE SEITEN
   ========================================================= */

.page-content {
    padding: 100px 0;
}

.page-header {
    max-width: 900px;

    margin-bottom: 55px;
}

.page-header h1 {
    margin-top: 10px;
}

.page-body {
    max-width: 800px;

    color: #c3ccd4;

    font-size: 1.05rem;
}

.page-body p {
    margin-bottom: 22px;
}

.page-body h2 {
    margin-top: 50px;

    margin-bottom: 20px;

    font-size: 1.8rem;
}

.page-body h3 {
    margin-top: 35px;

    margin-bottom: 15px;

    font-size: 1.3rem;
}

.page-body a {
    color: #b9c9d8;

    text-decoration: none;
}

.page-body a:hover {
    color: #ffffff;
}


/* Mobile */

@media (max-width: 800px) {

    .page-content {
        padding: 70px 0;
    }

}

/* =========================================================
   GALERIE-ÜBERSICHT
   ========================================================= */

.gallery-archive {
    padding: 100px 0;
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;

    margin-top: 55px;
}


.gallery-card {
    background: #0f141a;

    border: 1px solid #28323c;

    overflow: hidden;

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

.gallery-card:hover {
    transform: translateY(-5px);

    border-color: #60788e;
}


.gallery-card-image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #151c23;
}


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

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;
}

.gallery-card:hover .gallery-card-image img {
    transform: scale(1.03);
}


.gallery-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

    color: #536575;

    font-size: 0.8rem;

    letter-spacing: 0.2em;
}


.gallery-card-content {
    padding: 28px;
}


.gallery-card-content h2 {
    margin-bottom: 20px;

    font-size: 1.4rem;
}

.gallery-card-content h2 a {
    color: #e8edf2;

    text-decoration: none;
}


.gallery-card-link {
    color: #b9c9d8;

    text-decoration: none;

    font-size: 0.9rem;
}

.gallery-card-link:hover {
    color: #ffffff;
}


/* Mobile */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .gallery-archive {
        padding: 70px 0;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   GALERIE ALBUM
   ========================================================= */

.gallery-single {
    padding: 100px 0;
}

.gallery-header {
    max-width: 850px;

    margin-bottom: 60px;
}

.gallery-header h1 {
    margin-top: 10px;
}

.gallery-description {
    margin-top: 25px;

    color: #aeb8c2;

    font-size: 1.05rem;
}

.gallery-images {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.gallery-image {
    display: block;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #111820;

    border: 1px solid #28323c;
}

.gallery-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;
}

.gallery-image:hover img {
    transform: scale(1.04);
}

.gallery-empty {
    color: #8f9aa5;
}


/* Mobile */

@media (max-width: 900px) {

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

}

@media (max-width: 600px) {

    .gallery-single {
        padding: 70px 0;
    }

    .gallery-images {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   GALERIE TITELBILD
   ========================================================= */

.gallery-featured-image {
    margin-top: 35px;

    max-width: 1000px;

    overflow: hidden;

    border: 1px solid #28323c;
}

.gallery-featured-image-img {
    display: block;

    width: 100%;
    height: auto;
}

/* =========================================================
   BEGEMOT GALERIE - BILDRASTER
   ========================================================= */

.gallery-content .wp-block-gallery {
    display: grid !important;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;

    margin: 50px 0 0 0 !important;
}


.gallery-content .wp-block-gallery
.wp-block-image {
    width: 100% !important;

    margin: 0 !important;

    overflow: hidden;

    background: #111820;

    border: 1px solid #28323c;
}


.gallery-content .wp-block-gallery
.wp-block-image img {
    display: block;

    width: 100% !important;
    height: 260px !important;

    object-fit: cover;

    transition:
        transform 0.3s,
        border-color 0.3s;
}


.gallery-content .wp-block-gallery
.wp-block-image:hover img {
    transform: scale(1.04);
}


/* Mobile */

@media (max-width: 900px) {

    .gallery-content .wp-block-gallery {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .gallery-content .wp-block-gallery {
        grid-template-columns: 1fr;
    }

    .gallery-content .wp-block-gallery
    .wp-block-image img {
        height: auto !important;
    }

}

/* =========================================================
   BEGEMOT LIGHTBOX
   ========================================================= */

.begemot-lightbox {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

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

    background: rgba(0, 0, 0, 0.92);
}

.begemot-lightbox.active {
    display: flex;
}


.begemot-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;

    display: flex;

    align-items: center;
    justify-content: center;
}


.begemot-lightbox-image {
    display: block;

    max-width: 90vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* Schließen */

.begemot-lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    border: 0;

    background: none;

    color: #ffffff;

    font-size: 42px;

    line-height: 1;

    cursor: pointer;

    z-index: 2;
}


/* Navigation */

.begemot-lightbox-prev,
.begemot-lightbox-next {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    border: 0;

    background: none;

    color: #ffffff;

    font-size: 70px;

    line-height: 1;

    cursor: pointer;

    padding: 20px;

    z-index: 2;
}


.begemot-lightbox-prev {
    left: 20px;
}


.begemot-lightbox-next {
    right: 20px;
}


/* Hover */

.begemot-lightbox-close:hover,
.begemot-lightbox-prev:hover,
.begemot-lightbox-next:hover {
    opacity: 0.7;
}


/* Seite während Lightbox sperren */

body.lightbox-open {
    overflow: hidden;
}


/* Smartphone */

@media (max-width: 600px) {

    .begemot-lightbox-prev,
    .begemot-lightbox-next {

        font-size: 48px;

        padding: 10px;

    }

    .begemot-lightbox-close {

        top: 15px;
        right: 20px;

        font-size: 36px;

    }

    .begemot-lightbox-image {

        max-width: 95vw;
        max-height: 85vh;

    }

}