/* High Contrast CSS - Weißer Hintergrund, dunkle Kontraste Gilt nur, wenn gesetzt ist */ html[data-high-contrast="true"] { --color-base: #000000; --color-highlight: #000000; --color-steps-base: #000000; --product-selection-base: #ffffff; --product-selection-highlight: #000000; --color-footer: #000000; --color-footer-background: #ffffff; --color-footer-link: #000000; --btn-primary-bg: #000000; --btn-primary: #ffffff; --btn-primary-bg-hover: #333333; --btn-primary-hover: #ffffff; --formular-input-color: #000000; --formular-label-fake: #000000; --media-blue: #000000; --media-orange: #000000; --btn-border-color: #000000; --btn-color: #ffffff; --btn-bg-color-hover: #333333; --btn-color-hover: #ffffff; --box-background-light-bg: #ffffff; } html[data-high-contrast="true"] body, html[data-high-contrast="true"] .main-content, html[data-high-contrast="true"] .header-content, html[data-high-contrast="true"] .footer-content, html[data-high-contrast="true"] form { background-color: #ffffff !important; color: #000000 !important; } html[data-high-contrast="true"] .footer-content .footer--sub { background-color: #000000 !important; color: #ffffff !important; } html[data-high-contrast="true"] h1, html[data-high-contrast="true"] h2, html[data-high-contrast="true"] h3, html[data-high-contrast="true"] label, html[data-high-contrast="true"] .control-label, html[data-high-contrast="true"] .product-title-text, html[data-high-contrast="true"] .product-subtitle-text { color: #000000 !important; } html[data-high-contrast="true"] .form-group > .control-label::before { background: #ffffff; } html[data-high-contrast="true"] a, html[data-high-contrast="true"] a:visited { color: #000000 !important; text-decoration: underline; } html[data-high-contrast="true"] a.back2address:visited { color: #ffffff !important; } html[data-high-contrast="true"] a:hover { color: #ffffff !important; } html[data-high-contrast="true"] .footer--sub a, html[data-high-contrast="true"] .footer--sub a:visited { color: #ffffff !important; text-decoration: underline; } html[data-high-contrast="true"] .footer--sub a:hover { color: #cccccc !important; } html[data-high-contrast="true"] .btn, html[data-high-contrast="true"] a.button, html[data-high-contrast="true"] button, html[data-high-contrast="true"] input[type=submit] { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } html[data-high-contrast="true"] .btn:hover, html[data-high-contrast="true"] a.button:hover, html[data-high-contrast="true"] button:hover, html[data-high-contrast="true"] input[type=submit]:hover { background-color: #333333 !important; color: #ffffff !important; } html[data-high-contrast="true"] input, html[data-high-contrast="true"] select, html[data-high-contrast="true"] .form-group select.form-control, html[data-high-contrast="true"] textarea { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; } html[data-high-contrast="true"] .panel-default { background-color: #eeeeee !important; color: #000000 !important; } html[data-high-contrast="true"] .panel-default.selected { background-color: #ffffff !important; color: #000000 !important; outline: 3px solid #000000 !important; } html[data-high-contrast="true"] .panel-default:hover { box-shadow: 0 1vw 2vw rgb(0 0 0 / 20%); outline: 3px solid #000000 !important; } html[data-high-contrast="true"] .panel-default > .panel-footer { background-color: #000000 !important; color: #ffffff !important; } /* Font Awesome Icons in Steuerpanel */ .header-content .header { display: flex; align-items: center; flex-wrap: wrap; /* Wichtig bei xs-Spalten */ } .accessibility-panel { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; font-size: 1.25rem; } .accessibility-row { display: flex; align-items: center; gap: 2rem; } .accessibility-label { font-weight: bold; margin-right: 0.5rem; min-width: 120px; font-size: 1.5rem; } .accessibility-row button, html[data-high-contrast="true"] .accessibility-row button { background-color: transparent !important; border: none; padding: 0.25rem; cursor: pointer; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .accessibility-row button#contrastToggle, html[data-high-contrast="true"] .accessibility-row button#contrastToggle { padding: 0.25rem; width: auto; height: auto; } .accessibility-row button:disabled { opacity: 0.3; cursor: not-allowed; } .accessibility-row button i { font-size: 2rem; color: var(--color-base); } .kontrast-button-text { color: var(--media-orange); color: var(--color-base); font-weight: bold; padding-left: 0.25rem; } .main-header { display: flex; align-items: center; flex-wrap: wrap; } @media (max-width: 767px) { .main-header { flex-direction: row; align-items: center; } .main-header .logo-container { order: 2; text-align: center; margin-bottom: 0.5rem; } .main-header .icon-container { order: 3; text-align: center; margin-bottom: 0.5rem; } .main-header .accessibility-panel { order: 1; width: 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1rem; text-align: center; padding-bottom: 2rem; } .accessibility-panel .accessibility-row { flex-direction: row; align-items: center; gap: 0.5rem; } .accessibility-panel .accessibility-label { display: none; } .accessibility-label, .accessibility-row button, .accessibility-row button i { font-size: 1.5rem; } } .accessible-focus:focus-visible { outline: 2px solid #f17e00; outline-offset: 3px; } :focus-visible { outline: 3px solid #f17e00 !important; outline-offset: 2px !important; border-radius: 4px !important; } button:focus-visible, input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid #f17e00; outline-offset: 2px; } .craue_formflow_buttons { overflow: visible !important; } .craue_formflow_buttons button:focus-visible { outline: 3px solid #f17e00; border-radius: 60px !important; overflow: visible !important; }