/* Initialisieren der Schriftart */

@font-face {
    font-family: "robotoCondensedRegular";
    src: url("/static/fonts/roboto-condensed.regular.e6fd95f0cb83.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "roboto-condensedItalic";
    src: url("/static/fonts/roboto-condensed.italic.91da52a33975.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "roboto-condensedBold";
    src: url("/static/fonts/roboto-condensed.bold.7ff4438405bf.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "roboto-condensedBoldItalic";
    src: url("/staticfonts/roboto-condensed.bold-italic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* Standard-Thema (Hellmodus) */
:root {
    --light-background-color: #e2dfe1;
    --light-text-color: #000000;
    --light-link-hover-color: #fe9d0b;
    --light-link-color: #006da3;
    --light-border-color: #006da3;
}

/* Allgemeine Reset-Einstellungen für Listen */
ul {
    list-style: none;
    padding: 5px 0;
    margin: 0;
    font-family: 'robotoCondensedRegular';
}

/* Horizontale Navigation für Header und Footer */
nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'robotoCondensedRegular';
}

nav li {
    margin: 0 10px;
    color: var(--dark-text-color);
}

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

.block {
    text-align: justify;
    max-width: 600px; /* Du kannst diesen Wert anpassen, um die gewünschte Breite festzulegen */
    hyphens: auto; /* Erlaubt automatische Silbentrennung in unterstützten Sprachen */
    
}

.tech-card p {
    margin: 5px 0px 5px;
}

ul .tech-details:hover, .collaps-trigger:hover {
    cursor: pointer;
}

p {
    text-align: justify; 
    hyphens: auto; /* Erlaubt automatische Silbentrennung in unterstützten Sprachen */
    margin-bottom: 15px; /* Abstand zwischen Absätzen */
    font-family: 'robotoCondensedRegular';
}

header {
    width: clamp(515px, 100%, 200%);
    background-color: var(--light-border-color);
    color: var(--dark-text-color);
    padding: 0px 0;
    font-family: 'roboto-condensedBold';
    /* position: fixed; */
}

footer {
    width: clamp(515px, 100%, 200%);;
    background-color: var(--light-border-color);
    color: var(--dark-text-color);
    padding: 0 px 0;
    text-align: center;
    /* position: fixed; */
    bottom: 0;
}

main {
    flex: 1;  /* Erlaubt dem Hauptbereich, den verfügbaren Raum auszufüllen */
    padding: 10px 25px;
    background-color: var(--light-background-color);
}

.project-banner img {
    width: 100%; /* Setzt die Breite des Bildes auf die volle Breite des Containers */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    display: block; /* Verhindert, dass ein unerwünschter Rand um das Bild herum angezeigt wird */
}

#banner-img-left {
    width: clamp(200px, 39.8%, 50%); /* Setzt die Breite des Bildes auf die volle Breite des Containers */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    display: block; /* Verhindert, dass ein unerwünschter Rand um das Bild herum angezeigt wird */
}

#banner-img-right {
    width: clamp(200px, 33.5%, 50%); /* Setzt die Breite des Bildes auf die volle Breite des Containers */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    display: block; /* Verhindert, dass ein unerwünschter Rand um das Bild herum angezeigt wird */
}

.project-banner {
    position: relative;
    z-index: 1; /* Stellt sicher, dass das Banner sichtbar bleibt */
}

#banner_background {
    flex: 1 1 0;
    min-width: 0;
    background-color: #ffffff;
}

.nav_bar {
    display: flex; 
    margin: 0 auto;
}

.nav_bar_vertical {
    display: none;
    position: absolute;
    background-color: var(--light-border-color);
    border: 2px var(--light-border-color) solid;
    border-radius: 2px;
    padding: 5px;
    margin: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.burger_menu {
    display: none;
}

.burger_line {
    width: 30px;
    height: 5px;
    background-color: var(--light-background-color);
    border-radius: 1px;
    margin: 2px;
    transition: 0.4s;
}

@media (max-width: 700px) {
    #banner_background {
        flex: 1 1 0;
    }

    #banner-img-left {
        width: 280px;
    }

    #banner-img-right {
        width: 235px;
    }

    .nav_bar {
        display: none;
    }

    .burger_menu {
        display: block;
    }

    .burger_menu:first-child {
        display: flex;
    }

    .burger_menu:hover {
        cursor: pointer;
    }

    ul .div_icons {
        display: flex;
        flex: 1;
    }

    .change div:first-child{
        transform: translate(0, 7px) rotate(-45deg);
    }

    .change div:first-child + div {
        opacity: 0;
    }

    .change div:last-child {
        transform: translate(0, -7px) rotate(45deg);
    }

    .change .nav_bar {
        display: block;
    }

}

nav {
    position: relative;
    bottom: 0; /* Positioniert die Navigation am unteren Rand des Banners */
    width: 100%; /* Stellt sicher, dass die Navigation die volle Breite einnimmt */
    /*background-color: rgba(0, 0, 0, 0.5); /* Transparenz für die Navigation über dem Banner */
    color: var(--dark-text-color);
    text-align: center;
    z-index: 10; /* Höherer Z-Index als der des Banners */
    font-family: 'robotoCondensedRegular';
}

/* Form bei der mehrere Buttons nebeneinander angeordnet werden */
.multi-btn-form {
    border: none;
    box-shadow: none;
}

form {
    width: clamp(500px, 90%, 100%);
    padding: 20px 20px 20px 20px;
    box-shadow: 0 0 10px #ccc;
    overflow-x: auto;
}

form p {
    text-align: left;
}

.center {
    margin-left: auto;
    margin-right: auto;
  }

html, body {
    height: 100%;
    margin: 0;
    text-align: justify;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "robotoCondensedRegular";
    background-color: var(--light-background-color);
    color: var(--light-text-color);
}

.home-content img {
    display: block;
    margin: auto; /* Zentriert das Bild horizontal */
    max-width: 100%; /* Stellt sicher, dass das GIF responsive ist */
    position: relative;
    z-index: 2;  /* Höherer Z-Index als der des Banners */
}

textarea {
    overflow: hidden;
    resize: none;  /* Verhindert manuelle Größenänderung durch den Benutzer */
    min-height: 100px;  /* Mindesthöhe */
    width: 100%;  /* Passt die Breite an */
}

#map {
    height: 400px;
    width:  600px;
    box-shadow: 0 0 10px #4e4e4e;
}

/* Stile für das Label und die Checkbox beim Kontaktformular*/
label[for="privacy_consent"] {
    display: flex;               /* Flexbox-Layout für die Ausrichtung */
    align-items: center;         /* Vertikale Ausrichtung */
    font-size: 14px;             /* Schriftgröße für den Text */
    line-height: 1.5;            /* Zeilenhöhe für Lesbarkeit */
    gap: 10px;                   /* Abstand zwischen Checkbox und Text */
}

label[for="privacy_consent"] input {
    margin: 0;                   /* Entfernt unerwünschte Ränder */
    width: auto;                 /* Verhindert, dass die Checkbox skaliert wird */
}

label[for="privacy_consent"] a {
    color: #1b0e92;              /* Farbe für den Link */
    text-decoration: underline;  /* Unterstreichung für den Link */
}

/* Standard (Light Mode) Suchfeld */
input[type="text"], input[type="search"] {
    background-color: #ffffff; /* Heller Hintergrund */
    color: var(--light-text-color); /* Dunkle Schrift */
    border: 1px solid #182c44; /* Blaue Umrandung */
    padding: 8px;
    border-radius: 5px;
    width: clamp(200px, 95%, 100%);
}

/* Container um Suchfeld + Button */
.search-container {
    display: flex; /* Setzt Suchfeld + Button nebeneinander */
    justify-content: center; /* Zentriert die Elemente horizontal */
    align-items: center; /* Zentriert die Elemente vertikal */
    max-width: 510px; /* Etwas größer als Suchfeld & Button */
    height: 80px; /* Etwas höher für mehr Abstand */
    padding: 5px;
    background-color: var(--light-background-color); /* Heller Hintergrund */
    border-radius: 0px; /* Abgerundete Ecken */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /*Leichter Schatten für 3D-Effekt */
}

/* Einheitliche Größe für alle Suchfelder und Buttons */
input[type="text"], 
input[type="search"], 
button {
    width: 250px; /* Gleiche Breite */
    height: 40px; /* Gleiche Höhe */
    padding: 10px; /* Einheitliche Innenabstände */
    border-radius: 5px; /* Abgerundete Ecken für einheitlichen Look */
    box-sizing: border-box; /* Verhindert Größenabweichungen durch Padding */
}

[data-theme="light"] select {
    background-color: #ffffff;
    color: var(--light-text-color);
}

/* Einheitliche Breite und Höhe für Formularbuttons */
form button {
    width: 250px; /* Gleiche Breite wie Suchfeld */
    height: 40px; /* Gleiche Höhe */
    padding: 10px;
    margin-top: 5px;
    box-sizing: border-box;
}

/* Standard (Light Mode) Button */
button {
    background-color: #0056b3;
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease; /* Sanfte Animation */
}

/* Hover-Effekt für Light Mode */
button:hover {
    background-color: #092d53; /* Dunkleres Blau beim Hover */
}

/* Standardfarbe Link Datenschutzerklärung */
.privacy-link {
    color: var(--light-link-hover-color); /* Standardfarbe */
    text-decoration: underline;
}

/* Label mit Checkbox & Text nebeneinander ausrichten */
label {
    display: flex;
    align-items: center; /* Sorgt für perfekte vertikale Ausrichtung */
    gap: 8px; /* Abstand zwischen Checkbox & Text */
    cursor: pointer; /* Macht das Label klickbar */
    padding-top: 15px;
}

label input:checked{
    background-color: green;
}

/* Standard Checkbox */
input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #182c44;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Checkbox mit zentriertem Haken, wenn sie aktiviert ist */
input[type="checkbox"]:checked::after {
    content: "✔"; /* Haken-Symbol */
    font-size: 12px;
    color: #182c44;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Perfekt in die Mitte setzen */
}

/* Standard-Link-Farbe */
a {
    color: var(--light-border-color); /* Standardfarbe */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: color 0.3s ease; /* Sanfte Farbänderung */
    
}

/* Hover-Effekt */
a:hover {
    color: var(--light-link-hover-color); /* Dunkleres Blau beim Überfahren */
    text-decoration: underline; /* Optionale Unterstreichung */
}

/* Anwendung der Variablen */
table {
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
}

.container {
    display: flex;
    gap: 20px; /* Abstand zwischen Elementen */
}

.box {
    padding: 10px;
    background-color: #ccc;
    flex: 1; /* optional: gleichmäßige Verteilung */
}


th, td {
    border: none;    /*1px solid #ddd; */
    padding-right: 10px;
    text-align: left;
    max-width: 600px;
    vertical-align: center;
}

.remove-button {
    position: absolute;
    top: 2px;
    right: 5px;
    cursor: pointer;
    color: red;
    font-weight: bold;
    font-size: 16px;
}
.flow-step {
    position: relative; /* Wichtig, damit das "X" oben rechts platziert wird */
    background-color: #ADD8E6;
    padding: 10px;
    border-radius: 5px;
}

/* Design Prozesskettenbuilder (Light Mode) */
#process-chain {
    width: 80%;
    min-height: 100px;
    border: 2px dashed #000;
    padding: 10px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    background-color: #f9f9f9; /* Heller Hintergrund */
}

.draggable {
    padding: 10px;
    background-color: #ccc;
    cursor: grab;
    border-radius: 5px;
    display: inline-block;
    margin: 0px;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
}

.draggable .title {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
}

.draggable .subtitle {
    font-size: 11px;
    color: #a0a0a0;
    margin-top: 4px;
    word-break: break-word;
}



.flow-step {
    background-color: #ADD8E6; /* Hellblau für die Prozessschritte */
    padding: 10px;
    border-radius: 5px;
}

/* Standard (Light Mode) */
input[type="number"] {
    background-color: #ffffff;
    color: var(--light-text-color);
    border: 1px solid #0978e7; /* Blaue Umrandung */
    padding: 8px;
    border-radius: 5px;
    width: 80px;
    text-align: center;
}

.technology-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tech-card {
    border-left: 6px solid #3e7ebd;
    background-color: #f9f9f9;
    color: #000;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex: 1;
}


.tech-card h3 {
    color: #3e7ebd;
    margin-top: 25px;
    margin-bottom: 0px;;
}

.tech-header-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-left: 6px solid #3e7ebd;
    background-color: #f9f9f9;
    color: #000;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex: 1;
}

.tech-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.tech-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.tech-footer img.logo {
    max-height: 60px;
}

.tech-details {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Stern als Checkbox */
.star-checkbox input[type="checkbox"] {
    display: none;
}

.star-checkbox .star {
    cursor: pointer;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", Arial, sans-serif;
    font-size: 50px;
    color: #5e5e5e;
    transition: color 0.2s ease;
}

.star-checkbox input[type="checkbox"]:checked + .star {
    color: blue;
}

.star-checkbox .star::before {
    content: '★';
}

.view_mode_icon {
    content: url("../images/sun_icon.cc12338e17b7.png");
}

input[type="checkbox"]:checked + .view_mode_icon::before {
    content: url("../images/moon_icon.409a0f3580d1.png");
}

.view_mode_icon::before {
    content: url("../images/sun_icon.cc12338e17b7.png");
}

.youtube-wrapper {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.youtube-preview {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: -16.7%;
    left: 0%;
}

.youtube-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-play-button {
    position: absolute;
    top: 66.7%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    background: rgba(255, 0, 0, 0.6);
    color: #ffffff;
    border: black;
    border-radius: 50%;
    padding: 10px 10px;
    cursor: pointer;
    z-index: 10; /* Ensure it stays above other elements */
    width: 80px; /* Fixed width for better shape */
    height: 80px; /* Fixed height for better shape */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Availability bar for technologies */
.availability-container {
    margin-top: 12px;
}
.availability-bar {
    width: 100%;
    height: 18px;
    background: linear-gradient(90deg, #e6e6e6 0%, #e6e6e6 100%);
    border-radius: 10px;
    overflow: visible; /* allow handle to be fully visible at edges */
    border: 1px solid #000000;
}
.availability-bar-border {
    border: 1px solid #000000 !important;
}

.availability-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #2ecc71; /* default green; actual color set via JS based on percent */
    transition: width 400ms ease-in-out, background-color 300ms ease;
    border-radius: 10px; /* match bar rounding */
    clip-path: inset(0 round 10px); /* ensure fill is clipped to rounded corners even if parent overflow is visible */
    z-index: 1;
}
.availability-label {
    margin-top: 6px;
    font-size: 0.95rem;
    color: inherit;
}

/* Draggable handle for employee adjustments */
.availability-bar {
    position: relative;
}
.availability-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: ew-resize;
    z-index: 20; /* ensure handle is above fill */
    display: none; /* shown only for employees */
}
.availability-bar.editable .availability-handle {
    display: block;
}

.plotly-graph-div {
    background: #ffffff;
    border-radius: 10px;
}

#id_share_technologies label {
    padding: 0px;
}

#id_share_technologies {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10%;
    /* overflow-x: visible;
    overflow-y: scroll; */
    overflow: auto;
    max-height: 300px;
    width: clamp(324px, 100%, 100%);
    background-color: #ffffff;
    border: 1px solid #919191;
    border-radius: .5mm;
}

#select_btns_div {
    /* margin: 5px; */
    margin: 0px 0px 10px;
}

#select_btns_div button {
    max-width: 122px;
    margin-right: 5px;
}

#p_share_technology_label {
    margin-bottom: 5px;
}

.prev, .next {
    width: 80px;
    height: 37px;
}

.horizontal_scroller td {
    vertical-align: middle;
}

.horizontal_scroller {
    display: block;
}

/* @media (prefers-color-scheme: dark) {
    .tech-card {
        background-color: #1e1e1e;
        color: #f0f0f0;
        border-left-color: #6ca0e8;
        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
    }

    .tech-card h3 {
        color: #80bfff;
    }

    .star-checkbox .star {
        color: #888; /* hellgrau im Dark Mode *
    }

    .star-checkbox input[type="checkbox"]:checked + .star {
        color: yellow;
    }

    .btn-info {
        background-color: #2d6cdf;
        border-color: #2d6cdf;
        color: white;
    }
} */