/* ==============================================
 * Karriere.Haus CI/UX - KRITISCHE FIXES
 * ==============================================
 * 
 * Diese Datei enthält die wichtigsten Fixes für:
 * - Icons sichtbar machen
 * - Kontrastprobleme beheben
 * - Text-Lesbarkeit verbessern
 */

/* ==============================================
 * Font Awesome Icons - HÖCHSTE PRIORITÄT
 * ============================================== */

/* WICHTIG: Font Awesome muss VOR allen anderen Styles geladen werden */
/* Diese Regeln stellen sicher, dass Icons IMMER angezeigt werden */

/* Alle möglichen Font Awesome Icon-Selektoren */
.fas,
.far,
.fab,
.fa,
.fa-solid,
.fa-regular,
.fa-brands,
[class^="fa-"],
[class*=" fa-"],
button[class*="fa-"],
button.fas,
button.far,
button.fab,
button.fa,
button .fas,
button .far,
button .fab,
button .fa,
button i[class*="fa-"],
i.fas,
i.far,
i.fab,
i.fa,
i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

.far,
.fa-regular {
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-weight: 400 !important;
}

/* ==============================================
 * Text-Kontraste - Alle weißen Texte korrigieren
 * ============================================== */

/* Überschreibe ALLE weißen Texte auf hellem Hintergrund */
.title,
.title p,
.title span,
.title div,
.title label {
    color: #23282d !important; /* Charcoal statt weiß */
}

.title i {
    color: #f89e17 !important; /* Orange für Icons in Titeln */
}

.inline-check-box,
.inline-check-box p,
.inline-check-box span {
    color: #23282d !important; /* Charcoal statt weiß */
}

.inline-check-box i {
    color: #f89e17 !important; /* Orange für Icons */
}

.current-session-time {
    color: #23282d !important; /* Charcoal statt weiß */
}

.mod-title {
    color: #23282d !important; /* Charcoal statt grau */
}

/* Settings Table */
.settingsTable,
.settingsTable td,
.settingsTable th,
.settingsTable p,
.settingsTable span,
.settingsTable div {
    color: #23282d !important; /* Charcoal statt weiß */
    background-color: #ffffff !important; /* Weiß statt dunkel */
}

.settingsTable i {
    color: #f89e17 !important; /* Orange für Icons */
}

/* Tab Content */
.tabcontent,
.tabcontent p,
.tabcontent span,
.tabcontent div,
.tabcontent label,
.tabcontent td,
.tabcontent th {
    color: #23282d !important; /* Charcoal statt weiß */
    background-color: #ffffff !important; /* Weiß statt dunkel */
}

.tabcontent i {
    color: #f89e17 !important; /* Orange für Icons */
}

/* DateTime Picker */
#datetimePicker {
    color: #23282d !important; /* Charcoal statt weiß */
    background-color: #ffffff !important; /* Weiß statt dunkel */
}

/* Device Menu Headers */
.device-menu-header,
.device-menu-header p,
.device-menu-header span {
    color: #23282d !important; /* Charcoal statt weiß */
    background-color: #faf6f3 !important; /* Cream statt dunkel */
}

.device-menu-header i {
    color: #f89e17 !important; /* Orange für Icons */
}

/* Dropdown Menus */
.dropdown-menu,
.dropdown-menu li,
.dropdown-menu button {
    background-color: #ffffff !important; /* Weiß statt dunkel */
    color: #23282d !important; /* Charcoal statt weiß */
    border: 1px solid rgba(35, 40, 45, 0.15) !important;
}

.dropdown-menu li:hover {
    background-color: #faf6f3 !important; /* Cream beim Hover */
    color: #f89e17 !important; /* Orange Text beim Hover */
}

/* Tab Buttons */
.tab button,
.tab-button {
    color: #23282d !important; /* Charcoal statt weiß */
}

.tab button.active,
.tab-button.active {
    color: #f89e17 !important; /* Orange für aktive Tabs */
    border-bottom-color: #f89e17 !important;
}

.tab button:hover,
.tab-button:hover {
    color: #d38714 !important; /* Dunkleres Orange beim Hover */
}

/* ==============================================
 * Select-Felder - Alle bg-dark text-light entfernen
 * ============================================== */

select.form-select.bg-dark.text-light,
.form-select.bg-dark.text-light,
select.bg-dark.text-light,
select.form-select.text-light.bg-dark,
#initVideoSelect,
#initMicrophoneSelect,
#initSpeakerSelect,
#videoSelect,
#microphoneSelect,
#speakerSelect,
#videoQuality,
#screenQuality,
#screenOptimization,
#videoFps,
#screenFps,
#avatarQuality,
#avatarVoiceIDs,
#BtnAspectRatio,
#BtnVideoObjectFit,
#BtnVideoControls,
#selectTheme,
#BtnsBarPosition,
#pinVideoPosition,
#transcriptionLanguage,
#transcriptionDialect {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

select.form-select.bg-dark.text-light:focus,
.form-select.bg-dark.text-light:focus,
select.bg-dark.text-light:focus {
    border-color: #f89e17 !important;
    box-shadow: 0 0 0 3px rgba(248, 158, 23, 0.1) !important;
    outline: none !important;
    background-color: #ffffff !important;
    color: #23282d !important;
}

select option,
.form-select option {
    background-color: #ffffff !important;
    color: #23282d !important;
}

/* ==============================================
 * Swal2 Modals - Texte lesbar machen
 * ============================================== */

.swal2-title,
.swal2-content,
.swal2-html-container,
.swal2-validation-message {
    color: #23282d !important; /* Charcoal statt weiß */
    background-color: transparent !important;
}

.swal2-input {
    background-color: #ffffff !important;
    color: #23282d !important;
    border: 1px solid rgba(35, 40, 45, 0.2) !important;
}

.swal2-input:focus {
    border-color: #f89e17 !important;
    box-shadow: 0 0 0 3px rgba(248, 158, 23, 0.1) !important;
}

/* ==============================================
 * Init-User Modal - Alle Texte lesbar
 * ============================================== */

.init-user,
.init-modal-size {
    background-color: #ffffff !important;
    color: #23282d !important;
}

.init-user *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]) {
    color: #23282d !important;
}

/* ==============================================
 * Bottom Buttons - Icons sichtbar machen
 * ============================================== */

#bottomButtons button i,
#bottomButtons button .fas,
#bottomButtons button .far,
#bottomButtons button .fab,
#bottomButtons button .fa,
#bottomButtons button [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ==============================================
 * Tab Styles - Lesbare Texte
 * ============================================== */

.tab {
    background-color: #ffffff !important; /* Weiß statt dunkel */
    color: #23282d !important; /* Charcoal statt weiß */
}

.tab button {
    color: #23282d !important; /* Charcoal statt weiß */
}

.tab button.active {
    color: #f89e17 !important; /* Orange für aktive Tabs */
    background-color: rgba(248, 158, 23, 0.1) !important;
}

/* ==============================================
 * Allgemeine Text-Überschreibungen
 * ============================================== */

/* Überschreibe alle weißen Texte, AUSSER auf farbigem Hintergrund */
*:not(button.active):not(.btn-active):not(button[aria-pressed="true"]):not(.swal2-confirm):not(.button-primary):not(.pulse) p,
*:not(button.active):not(.btn-active):not(button[aria-pressed="true"]):not(.swal2-confirm):not(.button-primary):not(.pulse) span,
*:not(button.active):not(.btn-active):not(button[aria-pressed="true"]):not(.swal2-confirm):not(.button-primary):not(.pulse) div,
*:not(button.active):not(.btn-active):not(button[aria-pressed="true"]):not(.swal2-confirm):not(.button-primary):not(.pulse) label {
    color: #23282d !important;
}

/* ==============================================
 * Dropdown Toggle - Orange statt Blau
 * ============================================== */

.dropdown-toggle {
    color: #f89e17 !important; /* Orange statt blau */
}

.dropdown-toggle:hover {
    color: #d38714 !important;
}

/* ==============================================
 * Dunkle Bereiche - Text muss hell sein
 * ============================================== */

/* ==============================================
 * Hero-Bereich - Text muss dunkel sein (heller Hintergrund)
 * ============================================== */

/* .hero hat hellen Hintergrund - Text muss dunkel sein */
/* Überschreibe ALLE weißen Texte im Hero-Bereich */
.hero,
.hero *,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero span,
.hero div,
.hero label,
.hero-title,
.hero-paragraph,
.hero-copy,
.hero-copy *,
.hero-copy h1,
.hero-copy h2,
.hero-copy h3,
.hero-copy p,
.hero-copy span,
.hero-copy div,
section.hero,
section.hero *,
section.hero h1,
section.hero p,
body .hero,
body .hero * {
    color: #23282d !important; /* Charcoal für Text auf hellem Hintergrund */
}

/* Spezifische Überschreibung für Hero-Titel und -Paragraphen */
.hero-title,
.hero-paragraph,
#appTitle,
#appDescription,
#newRoomTitle,
#newRoomDescription,
#whoAreYouTitle,
#whoAreYouDescription {
    color: #23282d !important; /* Charcoal für Text im Hero-Bereich */
}

/* Spezifische Überschreibung für Hero-Bereich in .is-boxed (höchste Priorität) */
/* Diese Regel MUSS nach der .is-boxed * Regel kommen */
body.is-boxed .hero,
body.is-boxed .hero *,
body.is-boxed .hero-title,
body.is-boxed .hero-paragraph,
body.is-boxed .hero-copy,
body.is-boxed .hero-copy *,
body.is-boxed .hero-copy h1,
body.is-boxed .hero-copy h2,
body.is-boxed .hero-copy h3,
body.is-boxed .hero-copy p,
body.is-boxed .hero-copy span,
body.is-boxed section.hero,
body.is-boxed section.hero *,
body.is-boxed section.hero h1,
body.is-boxed section.hero p,
.is-boxed .hero,
.is-boxed .hero *,
.is-boxed .hero-title,
.is-boxed .hero-paragraph,
.is-boxed .hero-copy,
.is-boxed .hero-copy *,
.is-boxed .hero-copy h1,
.is-boxed .hero-copy h2,
.is-boxed .hero-copy h3,
.is-boxed .hero-copy p,
.is-boxed .hero-copy span,
.is-boxed section.hero,
.is-boxed section.hero *,
.is-boxed section.hero h1,
.is-boxed section.hero p {
    color: #23282d !important; /* Charcoal - Überschreibt .is-boxed * Regel */
}

/* ==============================================
 * Dunkle Bereiche - Text muss hell sein
 * ============================================== */

/* .cta-inner hat dunklen Hintergrund (#15181d) - Text muss hell sein */
.cta-inner,
.cta-inner *,
.cta-inner p,
.cta-inner span,
.cta-inner div,
.cta-inner h1,
.cta-inner h2,
.cta-inner h3,
.cta-inner h4,
.cta-inner h5,
.cta-inner h6,
.cta-inner label,
.cta .section-title {
    color: #ffffff !important; /* Weiß für Text auf dunklem Hintergrund */
}

/* .is-boxed hat dunklen Hintergrund (#242830) - Text muss hell sein */
/* AUSGENOMMEN: Hero-Bereich und Footer - haben hellen Hintergrund */
.is-boxed *:not(.hero):not(.hero *):not(.site-footer):not(.site-footer *):not(.footer-brand):not(.footer-links):not(.footer-links *):not(.footer-social-links):not(.footer-social-links *):not(.footer-copyright):not(.footer-copyright *):not(button):not(.btn):not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]) {
    color: #ffffff !important; /* Weiß für Text auf dunklem Hintergrund */
}

/* Dunkle Container - Text muss hell sein */
[style*="background: #15181d"],
[style*="background: #242830"],
[style*="background-color: #15181d"],
[style*="background-color: #242830"],
.bg-dark,
.bg-dark *:not(button.active):not(.btn-active):not(.fas):not(.far):not(.fab) {
    color: #ffffff !important; /* Weiß für Text auf dunklem Hintergrund */
}

/* Input-Felder in dunklen Bereichen müssen hellen Text haben */
.cta-inner input,
.cta-inner select,
.cta-inner textarea {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.cta-inner input:focus,
.cta-inner select:focus,
.cta-inner textarea:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #f89e17 !important; /* Orange für Focus */
}

/* ==============================================
 * Chat-Buttons - Hover-States korrigieren
 * ============================================== */

/* Chat Header Option Buttons - NICHT schwarz beim Hover */
.chat .chat-header .chat-option-buttons button,
.chat .chat-header .chat-option-buttons button i,
.chat-option-buttons button,
.chat-option-buttons button i,
#chatTogglePin,
#chatMaxButton,
#chatMinButton,
#chatCloseButton,
#chatDropDownMenu,
#chatTogglePin i,
#chatMaxButton i,
#chatMinButton i,
#chatCloseButton i,
#chatDropDownMenu i {
    background-color: transparent !important;
    background: transparent !important;
    color: #23282d !important; /* Charcoal für Icons */
    border: none !important;
    transition: all 0.2s ease !important;
}

/* Chat Header Option Buttons - Hover NICHT schwarz */
.chat .chat-header .chat-option-buttons button:hover,
.chat-option-buttons button:hover,
#chatTogglePin:hover,
#chatMaxButton:hover,
#chatMinButton:hover,
#chatCloseButton:hover,
#chatDropDownMenu:hover {
    background-color: rgba(248, 158, 23, 0.1) !important; /* Orange Transparenz statt schwarz */
    background: rgba(248, 158, 23, 0.1) !important;
    color: #f89e17 !important; /* Orange für Icons beim Hover */
    border: none !important;
}

/* Chat Header Option Buttons - Icons beim Hover orange */
.chat .chat-header .chat-option-buttons button:hover i,
.chat-option-buttons button:hover i,
#chatTogglePin:hover i,
#chatMaxButton:hover i,
#chatMinButton:hover i,
#chatCloseButton:hover i,
#chatDropDownMenu:hover i {
    color: #f89e17 !important; /* Orange Icons beim Hover */
}

/* Chat Message Input Buttons - NICHT schwarz beim Hover */
.chat .chat-message button,
.chat-message button,
#chatEmojiButton,
#chatShowParticipantsListBtn,
#chatMarkdownButton,
#fileShareChatButton,
#chatSpeechStartButton,
#chatSpeechStopButton,
#chatPasteButton,
#chatCleanTextButton,
#chatSendButton,
.chat-message button i,
#chatEmojiButton i,
#chatShowParticipantsListBtn i,
#chatMarkdownButton i,
#fileShareChatButton i,
#chatSpeechStartButton i,
#chatSpeechStopButton i,
#chatPasteButton i,
#chatCleanTextButton i,
#chatSendButton i {
    background-color: transparent !important;
    background: transparent !important;
    color: #23282d !important; /* Charcoal für Icons */
    border: none !important;
    transition: all 0.2s ease !important;
}

/* Chat Message Input Buttons - Hover NICHT schwarz */
.chat .chat-message button:hover,
.chat-message button:hover,
#chatEmojiButton:hover,
#chatShowParticipantsListBtn:hover,
#chatMarkdownButton:hover,
#fileShareChatButton:hover,
#chatSpeechStartButton:hover,
#chatSpeechStopButton:hover,
#chatPasteButton:hover,
#chatCleanTextButton:hover,
#chatSendButton:hover {
    background-color: rgba(248, 158, 23, 0.1) !important; /* Orange Transparenz statt schwarz */
    background: rgba(248, 158, 23, 0.1) !important;
    color: #f89e17 !important; /* Orange für Icons beim Hover */
    border: none !important;
}

/* Chat Message Input Buttons - Icons beim Hover orange */
.chat .chat-message button:hover i,
.chat-message button:hover i,
#chatEmojiButton:hover i,
#chatShowParticipantsListBtn:hover i,
#chatMarkdownButton:hover i,
#fileShareChatButton:hover i,
#chatSpeechStartButton:hover i,
#chatSpeechStopButton:hover i,
#chatPasteButton:hover i,
#chatCleanTextButton:hover i,
#chatSendButton:hover i {
    color: #f89e17 !important; /* Orange Icons beim Hover */
}

/* Chat Dropdown Menu Buttons - NICHT schwarz beim Hover */
.chat .chat-header .dropdown-menu button,
.chat .chat-header .dropdown-menu button i,
#chatGhostButton,
#chatSaveButton,
#chatCleanButton,
#chatGhostButton i,
#chatSaveButton i,
#chatCleanButton i {
    background-color: #ffffff !important; /* Weiß statt transparent */
    background: #ffffff !important;
    color: #23282d !important; /* Charcoal für Text/Icons */
    border: 1px solid rgba(35, 40, 45, 0.1) !important;
    transition: all 0.2s ease !important;
}

/* Chat Dropdown Menu Buttons - Hover NICHT schwarz */
.chat .chat-header .dropdown-menu button:hover,
.chat .chat-header .dropdown-menu li button:hover,
#chatGhostButton:hover,
#chatSaveButton:hover,
#chatCleanButton:hover {
    background-color: #faf6f3 !important; /* Cream statt schwarz */
    background: #faf6f3 !important;
    color: #f89e17 !important; /* Orange für Text beim Hover */
    border-color: #f89e17 !important; /* Orange Border */
}

/* Chat Dropdown Menu Buttons - Icons beim Hover orange */
.chat .chat-header .dropdown-menu button:hover i,
#chatGhostButton:hover i,
#chatSaveButton:hover i,
#chatCleanButton:hover i {
    color: #f89e17 !important; /* Orange Icons beim Hover */
}

/* ==============================================
 * ABSOLUT HÖCHSTE PRIORITÄT: Hero-Bereich Text
 * Diese Regeln müssen ALLES überschreiben
 * ============================================== */
html body.is-boxed .hero *,
html body.is-boxed .hero-title,
html body.is-boxed .hero-paragraph,
html body.is-boxed .hero-copy,
html body.is-boxed .hero-copy *,
html body.is-boxed .hero-copy h1,
html body.is-boxed .hero-copy h2,
html body.is-boxed .hero-copy h3,
html body.is-boxed .hero-copy p,
html body.is-boxed .hero-copy span,
html body.is-boxed section.hero,
html body.is-boxed section.hero *,
html body.is-boxed section.hero h1,
html body.is-boxed section.hero p {
    color: #23282d !important; /* Charcoal - ABSOLUTE HÖCHSTE PRIORITÄT */
}

/* Noch spezifischer für direkte Hero-Elemente */
section.hero h1,
section.hero h2,
section.hero h3,
section.hero p,
section.hero span,
.hero-title,
.hero-paragraph,
.hero-copy,
.hero-copy h1,
.hero-copy h2,
.hero-copy h3,
.hero-copy p,
.hero-copy span {
    color: #23282d !important; /* Charcoal - ABSOLUTE HÖCHSTE PRIORITÄT */
}

/* ==============================================
 * Footer-Bereich - Text muss dunkel sein (heller Hintergrund)
 * ABSOLUT HÖCHSTE PRIORITÄT - MUSS ALLES ÜBERSCHREIBEN
 * ============================================== */
html body.is-boxed .site-footer,
html body.is-boxed .site-footer *,
html body.is-boxed .site-footer-inner,
html body.is-boxed .site-footer-inner *,
html body.is-boxed .footer-brand,
html body.is-boxed .footer-brand *,
html body.is-boxed .footer-links,
html body.is-boxed .footer-links *,
html body.is-boxed .footer-links li,
html body.is-boxed .footer-links li *,
html body.is-boxed .footer-social-links,
html body.is-boxed .footer-social-links *,
html body.is-boxed .footer-social-links li,
html body.is-boxed .footer-social-links li *,
html body.is-boxed .footer-copyright,
html body.is-boxed .footer-copyright *,
body.is-boxed .site-footer,
body.is-boxed .site-footer *,
body.is-boxed .site-footer-inner,
body.is-boxed .site-footer-inner *,
body.is-boxed .footer-brand,
body.is-boxed .footer-brand *,
body.is-boxed .footer-links,
body.is-boxed .footer-links *,
body.is-boxed .footer-links li,
body.is-boxed .footer-links li *,
body.is-boxed .footer-social-links,
body.is-boxed .footer-social-links *,
body.is-boxed .footer-social-links li,
body.is-boxed .footer-social-links li *,
body.is-boxed .footer-copyright,
body.is-boxed .footer-copyright *,
.is-boxed .site-footer,
.is-boxed .site-footer *,
.is-boxed .site-footer-inner,
.is-boxed .site-footer-inner *,
.is-boxed .footer-brand,
.is-boxed .footer-brand *,
.is-boxed .footer-links,
.is-boxed .footer-links *,
.is-boxed .footer-links li,
.is-boxed .footer-links li *,
.is-boxed .footer-social-links,
.is-boxed .footer-social-links *,
.is-boxed .footer-social-links li,
.is-boxed .footer-social-links li *,
.is-boxed .footer-copyright,
.is-boxed .footer-copyright *,
.site-footer,
.site-footer *,
.site-footer-inner,
.site-footer-inner *,
.footer-brand,
.footer-brand *,
.footer-links,
.footer-links *,
.footer-links li,
.footer-links li *,
.footer-social-links,
.footer-social-links *,
.footer-social-links li,
.footer-social-links li *,
.footer-copyright,
.footer-copyright * {
    color: #23282d !important; /* Charcoal - Dunkler Text auf hellem Footer - ABSOLUTE HÖCHSTE PRIORITÄT */
}

/* Footer Links - Orange beim Hover */
.site-footer a,
.site-footer a:visited,
.footer-links a,
.footer-links a:visited {
    color: #23282d !important; /* Charcoal für Links */
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:active,
.footer-links a:hover,
.footer-links a:active,
.footer-social-links a:hover {
    color: #f89e17 !important; /* Orange beim Hover */
}
/* ==============================================
 * ABSOLUT LETZTE REGEL: Footer-Text MUSS dunkel sein
 * Diese Regel muss ALLES überschreiben, auch .is-boxed *
 * ============================================== */
html body.is-boxed .site-footer *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .site-footer-inner *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-brand *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-links *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-links li *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-social-links *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-social-links li *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-copyright *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]) {
    color: #23282d !important; /* Charcoal - ABSOLUT LETZTE REGEL, ÜBERSCHREIBT ALLES */
}

html body.is-boxed .site-footer a:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .site-footer a:visited:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-links a:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-links a:visited:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-social-links a:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]),
html body.is-boxed .footer-social-links a:visited:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(i[class*="fa-"]) {
    color: #23282d !important; /* Charcoal für Links - ABSOLUT LETZTE REGEL */
}

html body.is-boxed .site-footer a:hover,
html body.is-boxed .site-footer a:active,
html body.is-boxed .footer-links a:hover,
html body.is-boxed .footer-links a:active,
html body.is-boxed .footer-social-links a:hover {
    color: #f89e17 !important; /* Orange beim Hover - ABSOLUT LETZTE REGEL */
}

/* ==============================================
 * Header Logo - Sichtbar machen
 * ============================================== */
.site-header .header-logo-image,
.site-header .brand .header-logo-image,
.site-header .header-brand .header-logo-image,
.site-header .header-brand a .header-logo-image,
.site-header .header-brand h1 .header-logo-image,
.site-header .header-brand h1 a .header-logo-image,
.site-header .header-brand div .header-logo-image,
.site-header .header-brand div.m-0 .header-logo-image,
.site-header .header-brand div.m-0 a .header-logo-image,
.header-brand .header-logo-image,
.header-brand a .header-logo-image,
.header-brand h1 .header-logo-image,
.header-brand h1 a .header-logo-image,
.header-brand div .header-logo-image,
.header-brand div.m-0 .header-logo-image,
.header-brand div.m-0 a .header-logo-image {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 60px !important;
    opacity: 1 !important;
}

.site-header .header-brand,
.site-header .header-brand h1,
.site-header .header-brand h1.m-0,
.site-header .header-brand div,
.site-header .header-brand div.m-0 {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
}

.site-header .header-brand a {
    display: inline-block !important;
    visibility: visible !important;
}

/* ==============================================
 * Header Logo - ZUSÄTZLICHE Sicherheitsregeln
 * ============================================== */
.brand.header-brand,
.brand.header-brand div.m-0,
.brand.header-brand div.m-0 a,
.brand.header-brand .header-logo-image,
.brand.header-brand div.m-0 .header-logo-image,
.brand.header-brand div.m-0 a .header-logo-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 60px !important;
}

.brand.header-brand div.m-0 a {
    display: inline-block !important;
}

.brand.header-brand div.m-0 a img.header-logo-image {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 60px !important;
}

/* ==============================================
 * Header Logo - ABSOLUTE KRITISCHE REGEL
 * Überschreibt ALLES andere CSS
 * ============================================== */
img.header-logo-image,
img[src*="karriere-haus-logo"],
.header-logo-image[src*="karriere-haus-logo"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 60px !important;
    min-width: 100px !important;
    min-height: 30px !important;
}