/* stylesheet */

/* -----------------------------------------------------------------
** Name: project
** Source: static/project.css 
** Origin: https://battle-of-the-beasts.de/
--------------------------------------------------------------------

** TOC
** ----------------------
** 1: fonts
** 2: general
** 3: preloader
** 4: timeline
** 5: table
** 6: sidebar
** 7: icons
** 8: buttons
** ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 1: fonts
** Source: static/project/fonts.css
** Last update: 2025-06-27 19:54:20
*/

/* bangers-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/tpl/fonts/bangers-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* Blackhawk Italic */
@font-face {
  font-family: 'blackhawk italic';
  src: url('../assets/tpl/fonts/Blackhawk/Italic/font.woff2') format('woff2'),
       url('../assets/tpl/fonts/Blackhawk/Italic/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Blackhawk Regular */
@font-face {
  font-family: 'blackhawk regular';
  src: url('../assets/tpl/fonts/Blackhawk/Regular/font.woff2') format('woff2'),
       url('../assets/tpl/fonts/Blackhawk/Regular/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/tpl/fonts/oswald-v56-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/tpl/fonts/oswald-v56-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/tpl/fonts/oswald-v56-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 2: general
** Source: static/project/general.css
** Last update: 2026-01-21 10:25:19
*/

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-light);
    font-weight: 700;
}

p {
    font-size: 1.3em;
    line-height: 1.8;
}

a {
    text-decoration: none;
}

a.nav-link {
    color: #fff;
}
a.nav-link:hover {
    color: #ED7C22;
}

.text-orange {
    color: #ED7C22 !important;
}

.longtitle {
    font-family: 'Oswald', sans-serif;
    letter-spacing: .7px;
    font-size: 1.7rem;
    color: #ED7C22;
    text-transform: uppercase;
}

.list-rules li{
    font-size: 1.3rem;
    line-height: 1.8;
}


.badge-img-wrapper {
    margin-left: -32px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}
.badge-img {
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.7));
}

.inner-content {
    margin-top: -24px;
    z-index: 2;
    position: relative;
}

.cta_start:hover .cta-img{
            filter: 
                drop-shadow(3px -5px 2px rgba(0, 0, 0, 0.6))
                drop-shadow(-5px -2px 12px rgba(0, 0, 0, 0.7))
}

.card-bg-orange-gradient {
    height: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    padding: 6px;
    background: linear-gradient(to right, #ED7C22, #D46A1E);
    transition: box-shadow 0.3s ease-in-out;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.bg-orange-gradient {
    background: linear-gradient(to right, #ED7C22, #D46A1E);
}

.bg-darker {
    background-color: var(--bs-dark-bg-subtle);
}

.card {
    border-radius: 1rem;
    border: none !important;
    box-shadow: none;
    color: var(--bs-body-color);
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.card-flip-container {
    height: 350px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    padding: 6px;
    background-color: transparent;
    transition: box-shadow 0.3s ease-in-out;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.custom-row-height {
    min-height: 35vh;
}

.card-flip-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 20%, #ED7C22, transparent 80%);
    animation: rotateBorder 4s linear infinite;
    z-index: 0;
    border-radius: inherit;
    opacity: 1;
    transition: background 0.3s ease-in-out;
}

.card-flip-container:hover::before {
    background-color: #ED7C22;
    transition: .3s;
    /*
    background: conic-gradient(from 0deg at 50% 50%, transparent 20%, #333333, transparent 80%);
    animation: rotateBorder 4s linear infinite;
    */
}

.card-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-flip-container .card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: none;
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.card-custom-front {
    background: var(--bs-dark-bg-subtle);
    color: var(--bs-body-color);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: .3s;
}

.card-custom-back {
    display: none;
}

.card-flip-container:hover .card-custom-front {
    background-color: #ED7C22;
    color: #000000;
}

.card-flip-container:hover .card-custom-front h5,
.card-flip-container:hover .card-custom-front .card-text,
.card-flip-container:hover .card-custom-front .card-flip-indicator {
    color: #000000 !important;
}

.card-flip-container:hover .card-custom-front .card-body {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}

.bi-box-arrow-up-right {
    display: block;
    font-size: 1.5rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    color: var(--bs-secondary);
    transition: color 0.3s ease-in-out;
}
.bi-box-arrow-up-right::before:hover{color: black !improtant;}

div.p-4.rounded-4.shadow-sm.bg-dark-subtle.text-body-secondary.h-100 {
    /* No custom styles needed beyond Bootstrap classes from HTML */
}

div.p-4.rounded-4.shadow-sm.bg-dark-subtle.text-body-secondary.h-100 img {
    max-height: 100%;
    width: auto;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
        z-index: 1030;
    }

    aside {
        display: none !important;
    }

    .bi-box-arrow-up-right {
        display: block;
        color: #000000 !important;
    }

    .card-body .lead {
        font-size: 1rem;
    }

    .card-flip-container {
        height: auto;
        padding: 0;
        box-shadow: none;
        display: block;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: auto;
        min-height: 250px;
        background-color: #ED7C22;
        color: #000000;
        border: none;
        perspective: none;
        transform-style: flat;
    }

    .card-flip-container::before {
        display: none;
    }
    
    .card-flip-inner {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
        transform: none !important;
        transition: none !important;
        z-index: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card-flip-container .card {
        width: 100%;
        height: 100%;
        position: relative;
        top: auto;
        left: auto;
        box-shadow: none;
        z-index: auto;
        background-color: transparent;
        color: #000000;
    }

    .card-custom-front {
        background: transparent;
        color: #000000;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        position: relative;
        height: 100%;
        transition: none;
        z-index: auto;
    }

    .card-custom-back {
        display: none;
    }
}

@media (min-width: 768px) {
    .row.align-items-start.custom-row-height + .row.align-items-start.custom-row-height {
        margin-top: 12rem;
    }
}

#footer a{
    color: #fff !important;
    padding: 0px 12px;
}

#footer a:hover {
    text-decoration: underline;
}

.logo-img{
   max-width: 350px !important;
   position: relative;
   filter: drop-shadow(0px -12px 3px #1a1d20);
}

.first-paint {
    margin-top: -39px;
}

.middle-img {
    filter: drop-shadow(0px 5px 8px #000000);
    margin-top: -9px;
}

@media only screen and (min-width: 1400px) {
    .middle-img {
        margin-top: 0px;
    }    
}

@media only screen and (max-width: 374px) {
    .logo-img {
        max-width: 225px !important;
    }    
}
@media only screen and (max-width: 550px) {
    .logo-img {
        max-width: 200px !important;
    }
    .first-paint {
        margin-top: -23px;
    }
}

.botb-heading {
    letter-spacing: 1.5px;
    filter: drop-shadow(-3px -9px 14px #000000);
    text-shadow: -3px -2px 1px #000;
    font-family: 'blackhawk regular', sans-serif;
}

.dropdown-menu.show {
    border: 1px solid #6c757d;
}

.dropdown-item {
    margin: 12px 0px;
}

.dropdown-item.first {
    margin-top: 0px;
}
.dropdown-item.last {
    margin-bottom: 0px;
}

.dropdown-item:active {
    background-color: #6c757d !important;
}

.dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: #6c757d;
}

/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 3: preloader
** Source: static/project/preloader.css
** Last update: 2025-06-27 20:10:24
*/

/* Stile für das Preloader-Overlay */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-body-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    transition: transform 1s ease-in-out; /* Übergang für die Vorhang-Animation */
}

/* Klasse, die hinzugefügt wird, um den Vorhang zu animieren */
.preloader-hidden {
    transform: translateX(-100%); /* Bewegt das Overlay nach links aus dem Bildschirm */
}

/* Stil für den Inhalt im Preloader (Bild, Text, Spinner) */
.preloader-content {
    opacity: 0; /* Standardmäßig unsichtbar */
    transform: translateY(20px); /* Leicht nach unten verschoben */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Übergang für Einblendung des gesamten Blocks */
    /* Füge diese Eigenschaft hinzu, damit der Inhalt nicht vorzeitig sichtbar ist */
    visibility: hidden;
}

/* Klasse, die per JS hinzugefügt wird, um den Inhalt einzublenden */
.preloader-content-visible {
    opacity: 1; /* Vollständig sichtbar */
    transform: translateY(0); /* Zurück zur ursprünglichen Position */
    visibility: visible; /* Macht den Inhalt sichtbar */
}

/* Optional: Stile für Bild und Text, falls nötig */
.preloader-image {
    max-width: 342px; /* Beispiel maximale Breite für das Bild */
    height: auto;
    /* Dies ist wichtig für den Fade-In Effekt auf dem Bild selbst */
    opacity: 0;
    transition: opacity 1s ease-in; /* Längerer und sanfterer Übergang für das Bild */
}

.preloader-text {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    opacity: 0;
    transition: opacity 1s ease-in 0.2s; /* Längerer und sanfterer Übergang für den Text, mit Verzögerung */
    font-size: 1.8rem;
    letter-spacing: .8px;
}

/* Wenn .preloader-content-visible aktiv ist, blende Bild und Text ein */
.preloader-content-visible .preloader-image,
.preloader-content-visible .preloader-text {
    opacity: 1;
}

/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 4: timeline
** Source: static/project/timeline.css
** Last update: 2026-01-12 15:17:09
*/

.fitness-timeline {
    position: relative;
    _margin-left: 20px;
}

/* Die vertikale Linie des Zeitstrahls */
.fitness-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 2px;
    height: 100%;
    background-color: #ED7C22; /* Akzentfarbe: Ein kräftiges Orange */
    z-index: 0;
}

/* NEU: Styling für die "Start"- und "Ziel"-Markierungen */
.timeline-start,
.timeline-end {
    position: relative; /* Muss relativ sein, um in den Fluss zu passen */
    padding-left: 40px; /* Gleicher Abstand wie die timeline-items */
    margin-bottom: 20px; /* Abstand zu den ersten/letzten timeline-items */
    font-weight: bold;
    color: #ED7C22; /* Akzentfarbe */
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* NEU: Spezifisches Styling für die "Start"-Markierung, um sie an die Linie anzupassen */
.timeline-start::before {
    content: '';
    position: absolute;
    left: 10px; /* Position auf der Linie */
    top: 50%; /* Zentriert vertikal */
    transform: translateY(-50%); /* Exakte vertikale Zentrierung */
    width: 2px; /* Gleiche Dicke wie die Linie */
    height: 15px; /* Kurze Linie, die den Text "berührt" */
    background-color: #ED7C22; /* Akzentfarbe */
    z-index: 1; /* Über der Hauptlinie */
}

/* NEU: Spezifisches Styling für die "Ziel"-Markierung, um sie an die Linie anzupassen */
.timeline-end {
    margin-top: 20px; /* Abstand von den letzten timeline-items */
    margin-bottom: 0; /* Kein Abstand nach unten */
}

.timeline-end::before {
    content: '';
    position: absolute;
    left: 10px; /* Position auf der Linie */
    top: 50%; /* Zentriert vertikal */
    transform: translateY(-50%); /* Exakte vertikale Zentrierung */
    width: 2px; /* Gleiche Dicke wie die Linie */
    height: 15px; /* Kurze Linie, die den Text "berührt" */
    background-color: #ED7C22; /* Akzentfarbe */
    z-index: 1; /* Über der Hauptlinie */
}


/* Styling für jedes einzelne Zeitstrahl-Element */
.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 40px;
}

/* Der Kreis/Punkt auf dem Zeitstrahl */
.timeline-icon {
    position: absolute;
    left: 0;
    top: 5px; /* Vertikale Ausrichtung des Icons */
    width: 20px; /* Kleinere Größe für den Kreis ohne Icon */
    height: 20px;
    background-color: #ED7C22; /* Akzentfarbe: Ein kräftiges Orange */
    border-radius: 50%;
    _border: 2px solid #343a40; /* Dunklerer Rand, passend zum Hintergrund */
    z-index: 1;
}

/* Inhalt der Zeitstrahl-Elemente */
.timeline-content {
    background-color: #343a40; /* Dunkler Grauton für die Inhaltsboxen, ähnlich den anderen Elementen */
    padding: 15px;
    border-radius: 5px;
}

.timeline-content h3 {
    margin-top: 0;
    color: #ffffff; /* Weiß für die Überschrift */
    font-weight: 600; /* Etwas fetter für bessere Lesbarkeit */
}

.timeline-content p {
    margin-bottom: 0;
    color: #adb5bd; /* Ein helleres Grau für den Fließtext, gut lesbar */
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 767.98px) {
    .fitness-timeline {
        margin-left: 10px;
        /* Angepasstes Padding für Start/Ziel auf Mobilgeräten */
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .fitness-timeline::before {
        left: 5px;
    }

    /* Anpassung für Start/Ziel auf Mobilgeräten */
    .timeline-start,
    .timeline-end {
        padding-left: 30px; /* Anpassung an mobil timeline-item padding */
        font-size: 1rem; /* Etwas kleinerer Font */
    }
    .timeline-start::before,
    .timeline-end::before {
        left: 5px; /* Position anpassen an die mobil verschobene Linie */
    }

    .timeline-icon {
        left: -5px;
        top: 5px;
        width: 20px;
        height: 20px;
    }

    .timeline-item {
        padding-left: 30px;
    }
}

/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 5: table
** Source: static/project/table.css
** Last update: 2025-06-16 16:00:37
*/

/* **Anpassungen für die Tabelle (Border-Radius beibehalten)** */

/* Zusätzliche Styles für die Paginierung */
.pagination {
    margin-top: 20px;
}

.page-item .page-link {
    background-color: #343a40;
    color: #f8f9fa;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 2px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

#ED7C22

.page-item .page-link:hover {
    background-color: #ED7C22;
    color: #000;
    border-color: #ED7C22;
}

.page-item.active .page-link {
    background-color: #ED7C22;
    color: #000;
    border-color: #ED7C22;
    font-weight: bold;
}

.page-item.disabled .page-link {
    background-color: #212529;
    color: #6c757d;
    border-color: #343a40;
    cursor: not-allowed;
}

/* Anpassung für die Tabelle selbst, um dunklere Optik zu betonen */
.table-leaderboard-responsive .table {
    background-color: #343a40;
    color: #f8f9fa;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden; /* Wichtig, um sicherzustellen, dass Kinder die Ecken nicht "durchbrechen" */
}

.table-leaderboard-responsive .table thead th {
    background-color: #ED7C22;
    color: #000;
    padding: 15px;
    font-weight: 600;
}

.table-leaderboard-responsive .table thead tr:first-child th:first-child {
    border-top-left-radius: 5px;
}
.table-leaderboard-responsive .table thead tr:first-child th:last-child {
    border-top-right-radius: 5px;
}
.table-leaderboard-responsive .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
.table-leaderboard-responsive .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}


.table-leaderboard-responsive .table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-leaderboard-responsive .table tbody tr:last-child {
    border-bottom: none;
}

.table-leaderboard-responsive .table-striped tbody tr:nth-of-type(odd) {
    background-color: #3a4046;
}

.table-leaderboard-responsive .table-hover tbody tr:hover {
    background-color: #4a5056;
}

/* Such- und Filterfelder anpassen */
.form-control, .form-select {
    background-color: #343a40;
    color: #f8f9fa;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.form-control::placeholder {
    color: #adb5bd;
}

.form-control:focus, .form-select:focus {
    background-color: #3a4046;
    color: #f8f9fa;
    border-color: #ED7C22;
    box-shadow: 0 0 0 0.2rem rgba(253, 126, 20, 0.2);
}

/* Nav-Tabs anpassen */
.nav-tabs .nav-link {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    margin-right: 5px;
}

.nav-tabs .nav-link.active {
    background-color: #ED7C22;
    color: #000 !important;
    border-color: #ED7C22;
    border-bottom-color: #ED7C22;
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: #3a4046;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
}

/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 6: sidebar
** Source: static/project/sidebar.css
** Last update: 2025-06-18 14:56:29
*/

#sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #343a40;
    padding-top: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1030;
    overflow-y: auto;
}

#sidebar .sidebar-brand {
    text-align: center;
    margin-bottom: 30px;
}

#sidebar .sidebar-brand:hover {
    color: #ED7C22;
}

#sidebar .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar .nav-item {
    margin-bottom: 5px;
}

#sidebar .nav-link {
    display: block;
    color: #f8f9fa;
    font-size: 1.1em;
    padding: 12px 20px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left: 5px solid transparent;
}

#sidebar .nav-link:hover {
    background-color: #212529;
    border-left: 5px solid #f8f9fa;
}

#sidebar .nav-link.active {
    color: #ED7C22;
    font-weight: bold;
    background-color: #212529;
    border-left: 5px solid #ED7C22;
    padding-left: 15px;
}

.sidebar-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.logo-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2c2c2c;
    /* versuchter effekt
    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.7),
        inset -5px -5px 10px rgba(50, 50, 50, 0.9),
        3px 3px 8px rgba(0, 0, 0, 0.4),
        -3px -3px 8px rgba(255, 255, 255, 0.1);
        */
}

/* .logo-inner (monochrom) */
.logo-inner {
    width: 100%;
    height: auto;
    display: block;
    opacity: .5;
    filter:
        grayscale(100%)
        drop-shadow(0.5px 0.5px 0px rgba(255, 255, 255, 0.4))
        drop-shadow(-0.5px -0.5px 0px rgba(0, 0, 0, 0.4));
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.logo-inner.logo-colored {
    opacity: 1;
    filter:
        grayscale(0%) /* Macht das Logo farbig */
        drop-shadow(0.5px 0.5px 0px rgba(255, 255, 255, 0.4))
        drop-shadow(-0.5px -0.5px 0px rgba(0, 0, 0, 0.4));
}
.hosted-text {
    color: rgb(255 255 255 / 50%);
    transition: color .2s ease-in-out;
}

.hosted-text:hover {
    color: rgb(255 255 255 / 100%) !important;
}

/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 7: icons
** Source: static/project/icons.css
** Last update: 2025-06-28 00:44:05
*/

.bi-power::before {
    content: "\f4ff";
    font-weight: 600 !important;
    vertical-align: -0.09em !important;
}



/* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
** 8: buttons
** Source: static/project/buttons.css
** Last update: 2025-06-28 01:13:32
*/

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ED7C22;
    --bs-btn-border-color: #ED7C22;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1a1d20;
    --bs-btn-hover-border-color: #ED7C22;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ED7C22;
    --bs-btn-active-border-color: #ED7C22;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color
#0d6efd
: #0d6efd;
padding: 16px 12px;
}

/* ------------------------------------------------------------------- */
/* ----------------------------- THE END ----------------------------- */
/* ------------------------------------------------------------------- */