/* ==========================================
   IBM Plex Sans
========================================== */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Regular.ttf")
         format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-SemiBold.ttf")
         format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Bold.ttf")
         format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Italic.ttf")
         format("woff2");
    font-weight: 700;
}


/* ==========================================
   Corporate Design
========================================== */

:root {

    --wine_red: #8C0714;

    --orange: #EF8718;

    /* Original Beige: #FFFAA2 */

    --beige: var(--beige_50);

    --brand_color: var(--orange);

    --accent_color: var(--wine_red);

    --text_main: #2F2F2F;

    --font_main: "IBM Plex Sans", sans-serif;

    --shadow_soft:
        0 4px 16px rgba(140,7,20,0.20);
        
    --space_xs: 0.5rem;

    --space_sm: 1rem;

    --space_md: 2rem;

    --space_lg: 4rem;

    --space_xl: 6rem;
    
    --project_card_height: 32rem;
    
    
}

/* ==========================================
   Beige Tint Scale
   Basis: #FFFAA2
========================================== */

:root {

    --beige_10: #FFFFF6;

    --beige_20: #FFFEEC;

    --beige_30: #FFFEE3;

    --beige_40: #FFFDDA;

    --beige_50: #FFFDD1;
}

/* ==========================================
   Global
========================================== */

html,
body {

    height: 100%;
}

body {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    font-family: var(--font_main);

    color: var(--text_main);

    background-color: var(--beige_20);
}

main {

    flex: 1;
}

footer {

    padding: 2rem 0;

    border-top: 1px solid rgba(140,7,20,0.15);

    background: var(--beige_10);
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand_color);
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--brand_color);
}

h3 {
    font-size: 1.5rem;
    font-weight: 500;
	 color: var(--brand_color);
}

.logo-in-text {

    height: 1em;

    width: auto;

    vertical-align: text-bottom;
}

/* ==========================================
   Navigation
========================================== */

.navbar {

    background-color: color-mix(
        in srgb,
        var(--beige_50) 80%,
        transparent
    );

    border-bottom: 3px solid var(--brand_color);

    box-shadow: var(--shadow_soft);

    z-index: 1020;
}

.navbar-nav {

    align-items: center;
}

.navbar-brand {

    color: var(--accent_color);

    font-weight: 700;
}

.navbar-brand:hover {

    color: var(--brand_color);
}

.nav-link {

    color: var(--accent_color) !important;
}

.nav-link:hover {

    color: var(--brand_color) !important;
}

.nav-link.active {

    color: var(--brand_color) !important;

    font-weight: 600;
}

.navbar-logo {

    height: 5rem;

    width: auto;

    display: block;
}

.navbar-text-symbol {

    stroke: var(--brand_color);

    height: 2rem;

    width: auto;

    display: block;

    transition:
        stroke 0.2s ease,
        transform 0.2s ease;
}

.navbar-text-symbol:hover {

    stroke: var(--accent_color);

    transform: rotate(20deg);
}

/* ==========================================
   Hero
========================================== */

.hero {

    background: var(--beige_30);

    padding: 6rem 0;
}

.hero h1 {

    color: var(--accent_color);

    font-weight: 700;

    margin-bottom: 1rem;
}

.hero .lead {

    max-width: 700px;

    margin-bottom: 2rem;
}

/* ==========================================
   Buttons
========================================== */

.btn-primary {

    background: var(--brand_color);

    border-color: var(--brand_color);

    color: white;

    transition: all 0.2s ease;
}

.btn-primary:hover {

    background: var(--accent_color);

    border-color: var(--accent_color);

    box-shadow: var(--shadow_soft);

    color: white;
}

/* ==========================================
   Layout
========================================== */

.layout-grid {

}

.layout-row {

}

/* ==========================================
   Project Grid
========================================== */

.project-grid {

}

/*

Bootstrap Raster:

col-lg-4  = 1/3 Breite
col-lg-6  = 1/2 Breite
col-lg-8  = 2/3 Breite
col-lg-12 = volle Breite

Mobilgeräte umbrechen automatisch.

*/

/* ==========================================
   Project Grid
========================================== */

.project-grid .col-12,
.project-grid .col-md-6,
.project-grid .col-lg-4,
.project-grid .col-lg-6,
.project-grid .col-lg-8,
.project-grid .col-lg-12 {

}

/* ==========================================
   Project Cards
========================================== */

.project-card {

    height: var(--project_card_height);

    border-radius: 0.75rem;

    perspective: 1000px;

}

.project-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 8px 24px rgba(140,7,20,0.25);
}

.project-card-inner {

    position: relative;

    height: 100%;

    transition: transform 0.6s;

    transform-style: preserve-3d;
}

.project-card-front,
.project-card-back {

    padding: var(--space_md);

    display: flex;

    flex-direction: column;

    height: 100%;
    
    backface-visibility: hidden;
    
    -webkit-backface-visibility: hidden;
}

.project-card-front {

    background: white;

    border-top: 4px solid var(--brand_color);
}

.project-card-back {

    position: absolute;

    inset: 0;

    background: var(--beige_50);

    border-top: 4px solid var(--accent_color);

    transform: rotateY(180deg);
}

.project-card-title {

    color: var(--accent_color);

    font-weight: 700;

    margin-bottom: 1rem;
}

.project-card-list {

    margin-bottom: 1rem;
}

.project-card-list ul {

    margin: 0;

    padding-left: 1.25rem;
}

.project-card-list li {

    margin-bottom: 0.25rem;
}

.project-card-description {

    flex-grow: 1;
}

.project-card-link {

    margin-top: auto;

    color: white !important;

    font-weight: 600;

    text-decoration: none;
}

.project-card-link:hover {

    color: white !important;
}

.project-card-flip {

    margin-top: auto;

    text-align: right;

    color: var(--brand_color);

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;
}

.project-card-flip:hover {

    color: var(--accent_color);
}

.project-card.flipped .project-card-inner {

    transform: rotateY(180deg);
}

.project-card-button {

    display: inline-block;

    margin-top: auto;

    padding: 0.5rem 1rem;

    background: var(--brand_color);

    color: white !important;

    text-decoration: none;

    font-weight: 600;

    border-radius: 0.375rem;

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

.project-card-button:hover {

    background: var(--accent_color);

    color: white !important;

    transform: translateY(-2px);
}

/* ==========================================
   Static Project Cards
========================================== */

.project-card-static .project-card-back {

    display: none;
}

.project-card-static .project-card-flip {

    display: none;
}

.project-card-static .project-card-inner {

    transform: none !important;
}

/* ==========================================
   Project Card Carousel
========================================== */

.project-card-carousel {

    height: var(--project_card_height);

    border-radius: 0.75rem;

    overflow: visible;

    background: white;

    border-top: 4px solid var(--brand_color);

    box-shadow: var(--shadow_soft);
}

.project-card-carousel .carousel-inner {

    height: 100%;
}

.project-card-carousel .carousel-item {

    height: 100%;
}

.project-card-carousel .project-card {

    height: 100%;

    margin: 0;

    cursor: default;
}

.project-card-carousel .project-card:hover {

    transform: none;

    box-shadow: none;
}

.project-card-carousel .project-card-front {

    border-top: none;

    height: 100%;
}

/* ==========================================
   Carousel Navigation
========================================== */

.carousel-control-prev,
.carousel-control-next {

    width: 4rem;

    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {

    display: none;
}

.carousel-arrow {

    color: var(--brand_color);

    font-size: 2rem;

    font-weight: 700;

    line-height: 1;

    transition: color 0.2s ease;
}

.carousel-control-prev:hover .carousel-arrow,
.carousel-control-next:hover .carousel-arrow {

    color: var(--accent_color);
}

.carousel-indicators [data-bs-target]
{
    width: 24px;
    height: 4px;

    border-radius: 2px;

    background-color: var(--brand_color);

    opacity: 0.3;

    transition:
        opacity 0.2s ease,
        width 0.2s ease;
}

.carousel-indicators .active
{
    width: 40px;
    opacity: 1;
}

/* ==========================================
   Optional Bottom Navigation
========================================== */

.carousel-navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    margin-top: 1rem;
}

.carousel-navigation button {

    border: none;

    background: none;

    color: var(--brand_color);

    font-weight: 700;

    font-size: 1.25rem;

    transition: color 0.2s ease;
}

.carousel-navigation button:hover {

    color: var(--accent_color);
}

.carousel-control-prev {
    left: -4rem;
}

.carousel-control-next {
    right: -4rem;
}

/* ==========================================
   Project Sections
========================================== */

.project-section {

    padding: 4rem 0;
}

.project-section h2 {

    margin-bottom: 1rem;
}

.project-section p:last-of-type {

    margin-bottom: 2rem;
}

/* ==========================================
   Project Section Variants
========================================== */

.project-section-1 {

    background: var(--beige_10);
}

.project-section-2 {

    background: var(--beige_30);
}

/* ==========================================
   Sidebar
========================================== */

.site-sidebar {

    background-color: color-mix(
        in srgb,
        var(--beige_50) 80%,
        transparent
    );

    border-left: 3px solid var(--brand_color);

    box-shadow: var(--shadow_soft);
}

/* ==========================================
   Sidebar TOC
========================================== */

.toc-level-1 {

    font-weight: 700;
}

.toc-level-2 {

    margin-left: 1rem;
}

.toc-level-3 {

    margin-left: 2rem;

    font-size: 0.95rem;
}

.site-sidebar a {

    display: block;

    padding: 0.25rem 0;

    color: var(--accent_color);

    text-decoration: none;
}

.site-sidebar a:hover {

    color: var(--brand_color);
}

.site-sidebar a.active {

    color: var(--brand_color);

    font-weight: 600;
}