/* Frontend styles - migrated from legacy implementation with responsive improvements */
/*
* Note: Legacy CSS styles are loaded via STYLE() function in legacy code
* This file contains all custom tag styles migrated from legacy CSS
*/
/* ============================================
CSS Variables / Constants
============================================ */
:root {
--lbh1: #22307EFF;
--lbh2: #F28C00;
--active: #777;
--lab: rgba(240, 240, 255, 0.3);
--box: rgba(0, 0, 0, 0.2);
/* Elementor compatibility - falls nicht definiert */
--e-global-color-secondary: #F28C00;
}
/* ============================================
Toast Notification System
============================================ */
#px-lbh-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 11000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.px-lbh-toast {
min-width: 300px;
max-width: 500px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
opacity: 0;
transform: translateX(400px);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
pointer-events: auto;
border-left: 4px solid;
position: relative;
}
.px-lbh-toast-show {
opacity: 1;
transform: translateX(0);
}
.px-lbh-toast-success {
border-left-color: #4caf50;
background: #f1f8f4;
}
.px-lbh-toast-error {
border-left-color: #f44336;
background: #fff5f5;
}
.px-lbh-toast-content {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.px-lbh-toast-icon {
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.px-lbh-toast-success .px-lbh-toast-icon {
color: #4caf50;
background: #e8f5e9;
}
.px-lbh-toast-error .px-lbh-toast-icon {
color: #f44336;
background: #ffebee;
}
.px-lbh-toast-message {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: #333;
}
.px-lbh-toast-close {
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: #999;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color 0.2s;
}
.px-lbh-toast-close:hover {
color: #333;
}
.px-lbh-toast-success .px-lbh-toast-close:hover {
color: #4caf50;
}
.px-lbh-toast-error .px-lbh-toast-close:hover {
color: #f44336;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
#px-lbh-toast-container {
top: 10px;
right: 10px;
left: 10px;
}
.px-lbh-toast {
min-width: auto;
max-width: 100%;
}
}
/* ============================================
LBH-BLOCK Styles
============================================ */
lbh-block {
width: 100%;
max-width: 700px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 5px;
background: #EEF;
border: 2px solid var(--e-global-color-primary);
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
clear: both;
color: var(--lbh1);
--lbh-form-label-width: 220px;
}
lbh-block.weiss {
max-width: 100%;
background: #FFF;
margin: 0 0 20px 0;
}
lbh-block.person {
margin-top: 20px;
}
lbh-block * {
font-size: 18px;
}
lbh-block + lbh-block {
margin-top: 10px;
}
lbh-block h3 {
color: #0066cc;
font-weight: 700;
margin: 0 0 10px 0;
}
lbh-block label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--lbh1);
}
lbh-block label.lbh-label-long,
lbh-block .lbh-readonly-field.lbh-label-long {
align-items: center;
height: 40px;
}
lbh-block label.lbh-label-long > p,
lbh-block .lbh-readonly-field.lbh-label-long > p {
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
lbh-block .lbh-readonly-field.lbh-label-long span {
height: 40px;
line-height: 40px;
}
lbh-block label + label {
margin-top: 5px;
}
/* Firmenberufe-Block ohne Außen-Padding */
lbh-block#daten-block-professions {
padding: 0 !important;
}
lbh-block label label {
width: auto;
display: block;
float: left;
padding: 0 15px 0 0;
height: 40px;
line-height: 40px;
margin: 0;
color: #FFF;
gap: 5px;
}
/* ============================================
Registration Mode Switch
============================================ */
.lbh-registration-mode {
border: 2px solid rgba(34, 48, 126, 0.15);
border-radius: 24px;
padding: 25px 20px;
margin: 30px 0;
background: linear-gradient(135deg, rgba(238, 242, 255, 0.85), rgba(255, 255, 255, 0.95));
box-shadow: 0 25px 45px rgba(14, 30, 68, 0.08);
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.lbh-registration-mode legend {
font-size: 20px;
font-weight: 700;
color: var(--lbh1);
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.lbh-registration-mode__option {
display: block;
position: relative;
}
.lbh-registration-mode__option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.lbh-registration-mode__card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border-radius: 18px;
border: 2px solid rgba(34, 48, 126, 0.15);
background: #fff;
color: #1b2154;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
min-height: 72px;
box-shadow: 0 15px 35px rgba(8, 23, 53, 0.08);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.lbh-registration-mode__card::before {
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(34, 48, 126, 0.35);
box-shadow: inset 0 0 0 4px transparent;
transition: all 0.2s ease;
flex-shrink: 0;
}
.lbh-registration-mode__card:hover {
border-color: rgba(34, 48, 126, 0.35);
transform: translateY(-2px);
}
.lbh-registration-mode__option input:focus-visible + .lbh-registration-mode__card {
outline: 2px solid var(--e-global-color-secondary);
outline-offset: 3px;
}
.lbh-registration-mode__option input:checked + .lbh-registration-mode__card {
border-color: var(--e-global-color-secondary);
color: var(--lbh1);
background: rgba(242, 140, 0, 0.12);
box-shadow: 0 25px 45px rgba(242, 140, 0, 0.25);
}
.lbh-registration-mode__option input:checked + .lbh-registration-mode__card::before {
border-color: var(--lbh1);
background: var(--lbh1);
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.7);
}
.lbh-registration-mode__hint {
grid-column: 1 / -1;
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #1b2154;
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
border: 1px dashed rgba(34, 48, 126, 0.3);
padding: 16px 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (min-width: 768px) {
.lbh-registration-mode {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lbh-registration-mode legend,
.lbh-registration-mode__hint {
grid-column: 1 / -1;
}
}
/* ============================================
Registration Frames
============================================ */
.lbh-registration-frame {
width: 100%;
max-width: 100%;
margin: 20px auto;
padding: 30px;
border: 2px solid var(--e-global-color-primary);
box-sizing: border-box;
}
.lbh-registration-frame > h3:first-child {
margin-top: 0;
}
.lbh-event-title {
font-size: 28px;
margin-bottom: 35px;
}
/* ============================================
Reservation Page Form Text Colors
============================================ */
.lbh-reservation-form,
.lbh-reservation-form p,
.lbh-reservation-form label,
.lbh-reservation-form span,
.lbh-reservation-form legend,
.lbh-event-title,
.lbh-reservation-form h1,
.lbh-reservation-form h2,
.lbh-reservation-form h3,
.lbh-reservation-form h4,
.lbh-reservation-form h5,
.lbh-reservation-form h6,
.lbh-reservation-form a,
.lbh-reservation-form input,
.lbh-reservation-form textarea,
.lbh-reservation-form select,
.lbh-reservation-form option,
.lbh-reservation-form .lbh-registration-mode__card,
.lbh-reservation-form .lbh-registration-mode__hint {
color: var(--lbh1);
}
.lbh-reservation-form input::placeholder,
.lbh-reservation-form textarea::placeholder {
color: var(--lbh1);
opacity: 0.7;
}
/* ============================================
Company Summary Styles (Firmendaten-Anzeige)
============================================ */
lbh-block .lbh-company-summary {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
padding: 0;
margin: 0;
background: transparent;
}
lbh-block .lbh-readonly-field {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
background: #FFF;
height: 40px;
line-height: 40px;
}
lbh-block .lbh-readonly-field p {
padding: 0;
margin: 0 20px 0 0;
min-width: 240px;
max-width: 240px;
flex-basis: 240px;
flex-shrink: 0;
text-align: right;
color: var(--lbh1);
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 18px;
font-weight: normal;
}
lbh-block .lbh-readonly-field span {
flex-basis: 50%;
flex-grow: 1;
padding: 0 10px;
margin: 0;
color: var(--lbh1);
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
word-break: break-word;
}
lbh-block .lbh-readonly-field span.text-muted {
color: rgba(34, 48, 126, 0.5);
font-style: italic;
}
/* Responsive Anpassungen für Company Summary */
@media (max-width: 768px) {
lbh-block .lbh-readonly-field {
flex-direction: column;
align-items: flex-start;
height: auto;
min-height: 40px;
padding: 5px 0;
}
lbh-block .lbh-readonly-field p {
min-width: 100%;
max-width: 100%;
text-align: left;
height: auto;
line-height: 1.4;
margin-bottom: 5px;
}
lbh-block .lbh-readonly-field span {
width: 100%;
flex-basis: 100%;
padding: 0;
height: auto;
line-height: 1.5;
}
}
lbh-block label p{
margin: auto 0 !important;
}
lbh-block label input,
lbh-block label select,
lbh-block label textarea {
width: 100%;
margin: 0 10px 0 0;
color: var(--lbh1);
border: none;
outline: none;
height: 40px;
line-height: 40px;
padding: 0 10px;
flex-basis: 50%;
flex-grow: 1;
background: #FFF;
}
lbh-block label textarea {
height: 150px;
}
lbh-block label select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Select2 Styling für Frontend - passt zu anderen Input-Feldern */
lbh-block label .select2-container {
width: 100% !important;
flex-basis: 50%;
flex-grow: 1;
}
lbh-block label .select2-container--default .select2-selection--single {
height: 40px !important;
line-height: 40px !important;
border: none !important;
outline: none !important;
background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.5 2.5'%3E%3Cpolygon fill='%2322307E' points='0.75,0 1.5,1 0,1'/%3E%3Cpolygon fill='%2322307E' points='0.75,2.5 1.5,1.5 0,1.5'/%3E%3C/svg%3E") 100% 50% / 25px 65% no-repeat !important;
color: var(--lbh1) !important;
padding: 0 25px 0 10px !important;
border-radius: 0 !important;
cursor: pointer !important;
}
/* Select2: verhindere dickeren Rahmen im Fokus/Offen-Zustand */
lbh-block label .select2-container--default.select2-container--focus .select2-selection--single,
lbh-block label .select2-container--default.select2-container--open .select2-selection--single {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
lbh-block label .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 40px !important;
padding: 0 !important;
color: var(--lbh1) !important;
text-align: left !important;
}
lbh-block label .select2-container--default .select2-selection--single .select2-selection__arrow {
display: none !important;
}
/* Select2 Dropdown Styling */
.select2-dropdown {
border: none !important;
border-radius: 0 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
background: #FFF !important;
margin-top: 2px !important;
}
.select2-results__option {
padding: 8px 10px !important;
color: var(--lbh1) !important;
}
.select2-results__option--highlighted {
background: var(--lbh1) !important;
color: #FFF !important;
}
.select2-search--dropdown .select2-search__field {
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
outline: none !important;
padding: 8px 10px !important;
color: var(--lbh1) !important;
}
.select2-search--dropdown .select2-search__field:focus {
border-bottom-color: var(--lbh1) !important;
}
.lbh-form .form-control[readonly],
.lbh-form input[readonly] {
background-color: #f5f5f5;
color: #666;
opacity: 1;
cursor: not-allowed;
}
lbh-block label > p+div {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
flex-basis: 50%;
}
lbh-block label cite {
width: calc(100% - 150px);
margin: 0;
color: #FFF;
height: 40px;
display: flex;
align-items: center;
padding: 0 10px;
font-style: normal;
background: #f5f5f5;
}
lbh-block label div {
padding: 0;
}
lbh-block label > p {
padding: 0;
margin: 0 10px 0 0;
min-width: var(--lbh-form-label-width);
max-width: var(--lbh-form-label-width);
flex-basis: var(--lbh-form-label-width);
flex-shrink: 0;
text-align: right;
color: var(--lbh1);
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
lbh-block.lbh-beruf label + label {
margin-top: 10px;
}
.lbh-profession-options .lbh-checkbox + .lbh-checkbox {
margin-top: 10px;
}
lbh-block.lbh-beruf label span {
margin-top: 0;
}
lbh-block.lbh-beruf label {
justify-content: flex-start;
}
lbh-block.lbh-beruf h3,
.lbh-profession-heading {
width: 100%;
padding: 0;
margin: 25px 0;
line-height: 20px;
background: var(--lbh1);
color: #FFF;
outline: 20px solid var(--lbh1);
}
lbh-block.lbh-beruf h3:first-of-type,
.lbh-profession-group:first-of-type .lbh-profession-heading {
margin-top: 0;
}
.lbh-profession-heading {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border: none;
cursor: pointer;
gap: 15px;
font-size: 20px;
font-weight: 700;
text-align: left;
user-select: none;
}
.lbh-profession-heading:focus-visible {
outline: 2px solid var(--lbh2);
outline-offset: 2px;
}
.lbh-profession-heading__label {
flex: 1;
}
.lbh-profession-heading__action {
font-size: 15px;
font-weight: 400;
opacity: 0.85;
white-space: nowrap;
}
.lbh-profession-group[data-selection-state="full"] .lbh-profession-heading {
background: #18235f;
outline-color: #18235f;
}
.lbh-profession-group[data-selection-state="partial"] .lbh-profession-heading {
box-shadow: inset 0 -4px 0 var(--lbh2);
}
.lbh-profession-options {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
}
lbh-block textarea {
width: 100%;
border: none;
padding: 7px 10px;
height: 150px;
resize: none;
outline: none !important;
}
lbh-block.azubi-detail {
gap: 10px;
}
lbh-block.azubi-detail label {
gap: 10px;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
lbh-block.azubi-detail label input,
lbh-block.azubi-detail label select {
line-height: 40px;
flex-grow: 1;
background: #FFF;
}
lbh-block.azubi-detail label {
color: var(--lbh1);
}
lbh-block.azubi-detail label > p {
margin: 0;
min-width: var(--lbh-form-label-width);
max-width: var(--lbh-form-label-width);
flex-basis: var(--lbh-form-label-width);
flex-shrink: 0;
text-align: right;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0;
margin-right: 10px;
color: var(--lbh1);
}
lbh-block.azubi-detail label input[type="file"] {
margin: 0;
padding: 0;
}
lbh-block.azubi-detail label input[type="number"] {
padding-right: 0;
}
/* ============================================
LBH-TN (Teilnehmer) Styles
============================================ */
lbh-tn {
max-height: 40px;
padding: 0 20px;
width: 100%;
display: block;
transition: max-height 0.2s, padding 0.3s;
overflow: hidden;
margin: 0;
position: relative;
background: #EEF;
}
lbh-tn label p {
height: 100%;
color: var(--lbh1);
}
lbh-tn label.weg {
display: flex;
}
lbh-tn label.weg.hidden {
display: none !important;
}
lbh-tn.on {
max-height: 2000px;
padding: 50px 20px 20px 20px;
}
lbh-tn.intern {
background: #FFF;
padding: 30px 10px 10px 10px;
}
lbh-tn.intern.on {
max-height: 8000px;
}
lbh-tn + lbh-tn {
margin-top: 10px;
}
lbh-tn-data {
height: 40px;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
cursor: pointer;
background: var(--lbh1);
align-items: center;
justify-content: flex-start;
padding: 0 10px 0 40px;
color: #FFF;
margin: 0;
background-size: 16px;
background-position: 10px center;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
gap: 0.5rem;
}
/* Status-Icon in lbh-tn-data */
lbh-tn-data .azubi-person-icon {
flex-shrink: 0;
margin-right: 0;
}
/* Reservierungsseite: Header-Metadaten in lbh-tn-data ausblenden */
.lbh-reservation-form lbh-tn-data .azubi-person-icon,
.lbh-reservation-form lbh-tn-data .lbh-tn-label,
.lbh-reservation-form lbh-tn-data .lbh-participant-status {
display: none;
}
lbh-tn-data:hover {
background-color: var(--e-global-color-secondary);
}
lbh-tn-data.lbh-schalter {
cursor: pointer;
user-select: none;
transition: background-image 0.2s;
}
.lbh-tn-storno-angefragt {
border: 1px solid #f1c40f;
}
.lbh-tn-storniert {
opacity: 0.7;
}
.lbh-participant-status {
display: inline-flex;
align-items: center;
margin-left: 0.75rem;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background-color: rgba(255, 255, 255, 0.2);
}
.lbh-participant-status.lbh-status.active {
background-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
.lbh-participant-status.lbh-status.pending {
background-color: #fdf3d4;
color: #7f5f00;
}
.lbh-participant-status.lbh-status.cancelled {
background-color: #fdecea;
color: #842029;
}
/* Rotiere das Background-Image Chevron beim Öffnen */
lbh-tn.on lbh-tn-data.lbh-schalter,
lbh-tn.intern.on lbh-tn-data.lbh-schalter,
lbh-tn.on.intern lbh-tn-data.lbh-schalter,
lbh-tn[class*="on"][class*="intern"] lbh-tn-data.lbh-schalter {
background-image: url('data:image/svg+xml,') !important;
background-position: 10px center !important;
background-size: 16px !important;
background-repeat: no-repeat !important;
}
lbh-tn-data > a {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
display: block;
background: var(--e-global-color-secondary) url('data:image/svg+xml,') center no-repeat;
background-size: 20px;
}
lbh-tn-data > a:hover {
background-color: #000;
}
button + .eimer,
lbh-eimer {
width: 40px;
height: 40px;
background-position: center;
position: absolute;
top: 0;
right: 0;
background-size: 20px;
background-repeat: no-repeat;
background-color: #C00;
cursor: pointer;
background-image: url('data:image/svg+xml,');
display: block;
}
lbh-eimer.is-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(100%);
}
button + .eimer {
width: 30px !important;
height: 30px;
background-size: 14px;
float: right;
margin-top: 5px !important;
}
.neuer_teilnehmer:hover {
background-color: var(--e-global-color-secondary);
color: #FFF;
}
lbh-eimer:hover {
background-color: #EEF;
color: var(--lbh1);
}
.neuer_teilnehmer {
width: 250px;
cursor: pointer;
height: 40px;
line-height: 40px;
color: #FFF;
padding: 0 10px 0 40px;
margin: 15px 0 0 0;
background-size: 16px;
background-position: 10px center;
background-repeat: no-repeat;
background-color: var(--lbh1);
background-image: url('data:image/svg+xml,');
}
.neuer_teilnehmer.is-disabled {
background-color: #cbd5e1;
color: #475569;
cursor: not-allowed;
}
.neuer_teilnehmer.is-disabled:hover {
background-color: #cbd5e1;
color: #475569;
}
.v_teilnehmer_block {
padding: 0;
gap: 0;
}
/* ============================================
Spinner / Loading State
============================================ */
.lbh-spinner {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: lbh-spinner-rotate .75s linear infinite;
margin-left: 8px;
position: relative;
top: -1px;
}
@keyframes lbh-spinner-rotate {
to { transform: rotate(360deg); }
}
.lbh-is-loading {
pointer-events: none !important;
opacity: 0.8 !important;
cursor: default !important;
}
button[name="anmeldung_absenden"].lbh-is-loading {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
button[name="anmeldung_absenden"].lbh-is-loading .lbh-spinner {
width: 16px;
height: 16px;
border-width: 2px;
}
/* ============================================
Button Styles
============================================ */
azubi-box button,
#lbh-beruf-suche,
button[name="anmeldung_absenden"],
#ajax-save-data-intern,
lbh-tn button,
.elementor-tab-content button {
width: 250px;
cursor: pointer;
height: 40px;
line-height: 40px;
padding: 0 10px;
margin: 15px 0 0 0;
outline: none;
appearance: none;
}
form {
text-align: center;
}
#lbh-beruf-suche,
#ajax-save-data-intern {
margin: 15px auto 15px auto !important;
}
#ajax-save-data-intern,
.ajax-save-data-intern {
display: block;
width: auto;
min-width: 180px;
height: auto;
line-height: 1;
padding: 0.75rem 1.5rem;
margin: 15px auto !important;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--lbh1) !important;
background-image: none !important;
color: #ffffff;
border: none;
box-shadow: 0 4px 6px rgba(37, 70, 204, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#ajax-save-data-intern:hover,
#ajax-save-data-intern:focus,
.ajax-save-data-intern:hover,
.ajax-save-data-intern:focus {
background: var(--lbh2) !important;
background-image: none !important;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(37, 70, 204, 0.3);
filter: brightness(1.05);
}
button.storno {
background-color: #C00;
}
.lbh-registration-actions {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
width: 100%;
margin-top: 15px;
}
.lbh-registration-actions__col {
display: flex;
align-items: center;
}
.lbh-registration-actions__col:nth-child(2) {
justify-content: center;
}
.lbh-registration-actions__col:nth-child(3) {
justify-content: flex-end;
}
.lbh-is-loading {
opacity: 0.9;
}
.lbh-spinner {
display: inline-block;
width: 14px;
height: 14px;
margin-left: 8px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: lbh-spin 0.8s linear infinite;
vertical-align: middle;
}
@keyframes lbh-spin {
to {
transform: rotate(360deg);
}
}
/* azubi-save-button wird jetzt im Modal verwendet, nicht mehr in azubi-box */
.lbh-link,
.lbh-link:active,
.lbh-link:focus {
width: 250px;
cursor: pointer;
height: 30px;
line-height: 30px;
padding: 0 10px !important;
margin: 0;
display: block;
border-radius: 5px;
float: right;
text-align: center;
color: #FFF;
text-decoration: none;
background: var(--lbh1);
}
.tab-col .lbh-link,
.tab-col .lbh-link:active,
.tab-col .lbh-link:focus {
margin: 5px 0 0 0 !important;
border-radius: 0 !important;
float: none;
text-align: left !important;
}
.lbh-link:hover {
background: var(--lbh2);
color: #FFF;
}
/* ============================================
Veranstaltung Styles
============================================ */
lbh-veranstaltung {
background-color: #EEF;
border: 2px solid var(--lbh1);
padding: 20px;
display: flex;
flex-direction: column;
margin: 40px 0 0 60px;
position: relative;
cursor: pointer;
color: white;
}
lbh-veranstaltung p {
color: var(--lbh1);
}
lbh-veranstaltung * {
pointer-events: none;
}
lbh-veranstaltung a {
pointer-events: all !important;
}
lbh-veranstaltung a.sonderling {
position: relative;
top: -30px;
left: auto;
margin: 20px 0 0 -60px !important;
padding-left: 30px !important;
overflow: visible !important;
color: #FFF;
}
a.sonderling:hover{
color: var(--e-global-color-primary)!important;
}
lbh-veranstaltung a.sonderling * {
transition: none !important;
}
lbh-veranstaltung + lbh-veranstaltung {
margin-top: 40px;
}
lbh-bild {
width: 320px;
height: 181px;
display: block;
position: absolute;
top: -20px;
left: -60px;
box-shadow: 3px 3px 8px rgba(200, 200, 200, 0.2);
background-size: cover;
background-position: center;
z-index: 2;
background-color: #CCC;
}
lbh-titel {
color: var(--lbh1);
font-size: 22px;
font-weight: 700;
display: block;
margin: 0 0 10px 270px;
}
lbh-thema {
color: var(--lbh1);
font-size: 18px;
display: block;
margin: 0 0 10px 270px;
min-height: 55px;
}
lbh-kategorie,
lbh-teilnehmer {
color: var(--lbh1);
font-size: 18px;
display: block;
margin: 0 0 5px 270px;
height: 30px;
line-height: 30px;
}
lbh-veranstaltung .lbh-card-detail-link {
text-align: right;
clear: both;
}
lbh-card-detail-button,
.lbh-card-detail-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
top: 0 !important;
padding-left: 50px;
padding-right: 8px;
width: 260px !important;
height: 60px;
line-height: 60px;
border-radius: 0;
background: var(--lbh1);
color: #fff !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
box-shadow: none;
transition: none !important;
z-index: 1;
float: right;
}
lbh-card-detail-button::before,
.lbh-card-detail-button::before {
content: '';
position: absolute;
transform: skewX(-45deg) !important;
left: -30px;
top: 0;
width: 60px;
height: 60px;
background: var(--lbh1);
z-index: -1;
}
lbh-card-detail-button::after,
.lbh-card-detail-button::after {
display: none !important;
}
lbh-card-detail-button:hover,
.lbh-card-detail-button:hover {
background: var(--lbh2);
color: #fff;
transform: none;
box-shadow: none;
}
lbh-card-detail-button:hover::before,
.lbh-card-detail-button:hover::before {
background: var(--lbh2);
}
lbh-teilnehmer b,
lbh-kategorie b,
lbh-termine b {
color: var(--lbh1);
font-size: 18px;
margin: 0 10px 0 0;
line-height: 30px;
display: block;
float: left;
height: 30px;
}
lbh-teilnehmer b,
lbh-kategorie b {
width: 100px;
}
lbh-platz {
width: 24px;
height: 24px;
margin: 3px 10px 0 0;
border-radius: 50%;
display: block;
float: left;
border: 1px solid rgba(0, 0, 0, 0.2);
}
lbh-termine {
display: flex;
gap: 14px;
margin: 5px 0;
flex-wrap: wrap;
}
lbh-termine p {
display: flex;
flex-direction: column;
margin: 0;
width: 185px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
lbh-termine p:hover,
lbh-termine p:focus-within {
transform: translateY(-3px);
}
lbh-termine p.is-full,
lbh-termine p.is-full:hover,
lbh-termine p.is-full:focus-within {
transform: none;
}
lbh-termine p:hover lbh-datum,
lbh-termine p:hover lbh-termin,
lbh-termine p:focus-within lbh-datum,
lbh-termine p:focus-within lbh-termin {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}
lbh-termine p.is-full lbh-datum,
lbh-termine p.is-full lbh-termin {
box-shadow: none;
opacity: 0.65;
}
lbh-termine p.is-full lbh-termin {
cursor: default;
}
lbh-termine p a.is-disabled {
pointer-events: none;
cursor: default;
}
lbh-termine p lbh-datum {
color: var(--lbh1) !important;
font-size: 16px !important;
width: 100% !important;
background: #FFF !important;
line-height: 30px !important;
height: 30px !important;
text-align: center !important;
display: block !important;
border: 2px solid var(--lbh1) !important;
}
lbh-termine p lbh-datum a {
color: var(--lbh1) !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
height: 100% !important;
line-height: 30px !important;
font-size: 14px !important;
font-weight: 900 !important;
transition: opacity 0.2s !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
lbh-termine p lbh-datum a::after,
lbh-termine p lbh-datum a::before {
display: none !important;
content: none !important;
}
lbh-termine p lbh-datum a:hover {
opacity: 0.8 !important;
color: var(--lbh1) !important;
text-decoration: none !important;
font-size: 14px !important;
}
lbh-termine p lbh-datum a:hover::after,
lbh-termine p lbh-datum a:hover::before {
display: none !important;
content: none !important;
}
lbh-termine p lbh-termin {
color: #FFF;
font-size: 16px;
width: 100%;
line-height: 30px;
height: 30px;
text-align: center;
display: block;
background: var(--lbh1);
position: relative;
cursor: pointer;
transition: opacity 0.2s;
padding: 0;
margin: 0;
}
lbh-termine p lbh-termin:hover {
opacity: 0.9;
}
lbh-veranstaltung lbh-termine p lbh-termin a,
lbh-termine p lbh-termin a {
color: inherit !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
height: 100% !important;
line-height: 30px !important;
text-align: center !important;
position: relative !important;
z-index: 1 !important;
pointer-events: all !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
transition: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Verhindere ::before Pseudo-Element von Theme-CSS für Termin-Links */
lbh-veranstaltung lbh-termine p lbh-termin a::before,
lbh-termine p lbh-termin a::before {
content: none !important;
display: none !important;
}
lbh-veranstaltung lbh-termine p lbh-termin a:hover,
lbh-termine p lbh-termin a:hover {
text-decoration: none !important;
opacity: 1 !important;
color: inherit !important;
background: transparent !important;
transform: none !important;
}
lbh-termine p lbh-termin::after {
content: '';
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: 3px;
z-index: 0;
}
lbh-termine p lbh-termin.c1 {
background: #FFF !important;
color: #000 !important;
}
lbh-veranstaltung lbh-termine p lbh-termin.c1 a,
lbh-termine p lbh-termin.c1 a {
color: #000 !important;
}
lbh-termine p lbh-termin.c1::after {
background: #5D5;
}
lbh-termine p lbh-termin.c2 {
background: #FFF !important;
color: #000 !important;
}
lbh-veranstaltung lbh-termine p lbh-termin.c2 a,
lbh-termine p lbh-termin.c2 a {
color: #000 !important;
}
lbh-termine p lbh-termin.c2::after {
background: #FD0;
}
lbh-termine p lbh-termin.c3 {
background: #FFF !important;
}
lbh-veranstaltung lbh-termine p lbh-termin.c3 a,
lbh-termine p lbh-termin.c3 a {
color: #FFF !important;
color: #000 !important;
}
lbh-termine p lbh-termin.c3::after {
background: #F55;
}
div.c1 {
background: #5D5 !important;
}
div.c2 {
background: #FD0 !important;
}
div.c3 {
background: #F55 !important;
}
lbh-details {
max-height: 0;
opacity: 0;
transition: 0.2s;
overflow: hidden;
}
lbh-details.on {
max-height: 4000px;
opacity: 1;
overflow: visible;
}
lbh-details::after {
content: '';
display: block;
clear: both;
}
lbh-details > p {
line-height: 24px;
}
lbh-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
float: left;
width: calc(100% - 290px);
margin: 10px 0 0 10px;
}
.lbh-info-card {
background: #FFF;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 12px;
padding: 20px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: 12px;
min-height: 150px;
}
.lbh-info-card__label {
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--e-global-color-secondary);
font-weight: 700;
}
.lbh-info-card__value {
color: var(--lbh1);
font-size: 16px;
line-height: 1.5;
}
.lbh-info-card__value p {
margin: 0 0 10px 0;
}
.lbh-info-link {
height: 40px;
line-height: 40px;
width: 100% !important;
margin: 0;
font-size: 16px !important;
}
.px-event-detail__materials--inline {
width: 100%;
margin: 10px 0 0 10px;
float: left;
padding-top: 0;
border-top: 0;
}
lbh-buttons,
.lbh-buttons {
display: flex;
flex-direction: column;
gap: 40px;
align-items: flex-start;
justify-content: flex-start;
float: left;
width: 290px;
margin: 10px 0 0 -20px;
}
lbh-buttons a,
.lbh-buttons a {
display: block;
top: -2px;
position: relative;
color: #FFF !important;
padding-left: 50px;
padding-right: 50px;
}
/* Accordion Widget buttons use ::before instead - override with higher specificity */
.lbh-accordion .lbh-buttons > a::after,
.lbh-accordion .lbh-buttons > .toggle-button::after,
.px-lbh-accordion .lbh-buttons > a::after,
.px-lbh-accordion .lbh-buttons > .toggle-button::after {
display: none !important;
}
/* lbh-buttons in lbh-details: Spitzen nach rechts wie bei Accordion */
lbh-details lbh-buttons a::after,
lbh-details .lbh-buttons a::after {
display: none !important;
}
lbh-details lbh-buttons a::before,
lbh-details .lbh-buttons a::before {
content: '';
position: absolute;
right: -30px;
top: 0;
width: 60px;
height: 60px;
background: var(--e-global-color-primary);
transform: skewX(45deg);
z-index: -1;
}
lbh-details lbh-buttons a:hover::before,
lbh-details .lbh-buttons a:hover::before {
background: var(--e-global-color-secondary);
}
lbh-details lbh-buttons a:hover::after,
lbh-details .lbh-buttons a:hover::after {
background: transparent !important;
}
/* ============================================
Suche Styles
============================================ */
lbh-suche {
display: flex;
flex-direction: column;
gap: 10px;
width: 600px;
max-width: 100%;
background: var(--e-global-color-693d679);
padding: 20px;
position: relative;
margin: 0 0 50px 0;
}
lbh-suche label {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
}
lbh-suche label span {
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
lbh-suche input {
border: none;
outline: none;
appearance: none;
background: #FFF;
color: #000;
padding: 0 10px;
height: 40px;
width: 70%;
font-size: 18px;
}
lbh-suche input[type="date"] {
width: 46%;
}
lbh-suche select {
border: none;
outline: none;
appearance: none;
color: #000;
padding: 0 25px 0 10px;
height: 40px;
width: 70%;
font-size: 18px;
}
lbh-suche h3 {
color: #000;
font-weight: 700;
margin: 0 0 20px 0;
padding-right: 80px;
}
lbh-suche label:last-of-type {
margin-bottom: 0;
}
lbh-suche button {
outline: none;
appearance: none;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
text-align: center;
width: 260px;
height: 60px;
line-height: 60px;
background: var(--e-global-color-primary);
color: #FFF;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border: none;
border-radius: 0;
cursor: pointer;
z-index: 1;
transition: none !important;
overflow: visible;
}
lbh-suche label:last-of-type {
margin-bottom: 0;
}
/* Buttons Container - Flexbox Wrapper */
lbh-suche .lbh-suche-buttons {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
margin-top: 10px;
min-height: 60px;
padding-bottom: 0;
}
lbh-suche .lbh-filter-reset {
position: absolute !important;
left: 0 !important;
right: auto !important;
bottom: 0 !important;
top: auto !important;
background: var(--lbh2) !important;
color: #FFF !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 260px !important;
height: 60px !important;
line-height: 60px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
border-radius: 0 !important;
cursor: pointer !important;
z-index: 2 !important;
transition: none !important;
white-space: nowrap !important;
text-align: center !important;
display: none !important;
}
.lbh-suche .lbh-filter-reset button::before,
.lbh-suche .lbh-filter-reset:hover button::before {
content: none !important;
display: none !important;
}
lbh-suche .lbh-suche-buttons button#v_suche_los {
position: absolute !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
top: auto !important;
margin: 0 !important;
display: inline-flex;
}
lbh-suche .lbh-filter-reset:hover {
background: #d67a00 !important;
color: #FFF !important;
}
lbh-suche .lbh-filter-reset:hover::before {
background: #d67a00 !important;
}
lbh-suche button#v_suche_los::before {
content: '';
position: absolute;
transform: skewX(-45deg) !important;
right: auto !important;
left: -30px !important;
bottom: 0;
top: auto;
width: 60px;
height: 60px;
background: var(--e-global-color-primary);
z-index: -1;
transition: none !important;
}
lbh-suche button#v_suche_los::after {
content: none !important;
display: none !important;
transition: none !important;
}
lbh-suche button#v_suche_los:hover {
background: var(--e-global-color-secondary);
color: #FFF;
}
lbh-suche button#v_suche_los:hover::before {
background: var(--e-global-color-secondary);
}
lbh-suche .lbh-filter-reset:active {
background: #bf6d00;
}
/* ============================================
Pagination Styles
============================================ */
.lbh-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 40px 0;
padding: 20px 0;
}
.lbh-pagination-btn {
background: var(--lbh1);
color: #FFF;
border: none;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.lbh-pagination-btn:hover {
background: var(--lbh2);
}
.lbh-pagination-btn:disabled {
background: #CCC;
cursor: not-allowed;
}
.lbh-pagination-info {
font-size: 16px;
font-weight: 600;
color: var(--lbh1);
}
lbh-flag {
position: absolute;
bottom: -60px;
left: 0;
width: 50px;
height: 60px;
display: block;
background: url('data:image/svg+xml,');
}
/* ============================================
Betriebe Styles
============================================ */
lbh-betriebe {
display: flex;
align-items: stretch;
gap: 2%;
row-gap: 20px;
margin: 0 auto;
justify-content: flex-start;
flex-wrap: wrap;
}
lbh-betriebe p {
margin: 5px 0 0 0;
font-style: normal;
opacity: 0.9;
font-size: 16px;
color: #0f2b6c;
}
lbh-betriebe lbh-block {
width: 32%;
position: relative;
margin: 0;
}
lbh-betriebe lbh-block + lbh-block {
margin: 0;
}
lbh-betriebe lbh-block .i-web,
lbh-betriebe lbh-block .i-mail,
lbh-betriebe lbh-block .i-phone {
width: 40px;
height: 40px;
padding: 0;
text-decoration: none;
}
lbh-betriebe lbh-block .i-web:hover,
lbh-betriebe lbh-block .i-mail:hover,
lbh-betriebe lbh-block .i-phone:hover {
background-color: #000;
}
lbh-betriebe lbh-block .i-web {
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
}
lbh-betriebe lbh-block .i-mail {
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
}
lbh-betriebe lbh-block .i-phone {
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
}
firma-kontakt {
display: flex;
gap: 20px;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin: 5px 0;
}
firma-kontakt:empty {
display: none;
}
firma-kontakt label {
width: auto;
margin: 0 !important;
}
.lbh-betrieb-card {
width: 32%;
background: #f7f9fc;
border: 1px solid #dbe4f5;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}
.lbh-betrieb-card:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.lbh-betrieb-header {
width: 100%;
padding: 14px 16px;
background: #0f2b6c;
color: #fff;
font-weight: 700;
}
.lbh-betrieb-title {
display: block;
}
.lbh-betrieb-body {
padding: 12px 16px 16px 16px;
color: #0f2b6c;
display: flex;
flex-direction: column;
gap: 8px;
}
.lbh-betrieb-address {
font-weight: 600;
}
.lbh-betrieb-body firma-kontakt {
margin: 6px 0;
display: flex;
gap: 8px;
align-items: center;
}
.lbh-betrieb-body firma-kontakt .i-web,
.lbh-betrieb-body firma-kontakt .i-mail,
.lbh-betrieb-body firma-kontakt .i-phone {
width: 40px;
height: 40px;
padding: 0;
text-decoration: none;
display: inline-block;
flex-shrink: 0;
}
.lbh-betrieb-body p {
margin: 0;
color: #0f2b6c;
}
@media (max-width: 1024px) {
.lbh-betrieb-card {
width: 48%;
}
}
@media (max-width: 640px) {
.lbh-betrieb-card {
width: 100%;
}
}
/* Allgemeine Styles für Kontakt-Icons (funktionieren auch außerhalb von lbh-betriebe) */
.i-web,
.i-mail,
.i-phone {
width: 40px;
height: 40px;
padding: 0;
text-decoration: none;
display: inline-block;
}
.i-web:hover,
.i-mail:hover,
.i-phone:hover {
background-color: #000 !important;
}
.i-web {
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
}
.i-mail {
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
}
.i-phone {
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
}
/* ============================================
Docs Styles
============================================ */
lbh-docs {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: flex-start;
align-items: flex-start;
}
lbh-docs > h3 {
margin: 0 0 10px 0;
}
lbh-docs > a {
display: block;
width: 100%;
padding: 10px 10px 10px 45px;
overflow: hidden;
text-overflow: ellipsis;
color: #FFF !important;
background: var(--lbh1) url('data:image/svg+xml,') no-repeat 10px center;
background-size: 20px;
}
lbh-docs > a:hover {
background-color: var(--e-global-color-secondary);
}
/* ============================================
Select Styles
============================================ */
lbh-select {
width: calc(100% - 210px);
height: 120px;
border-radius: 0 5px 5px 0;
display: block;
float: left;
overflow-y: auto;
background: #FFF;
padding: 5px 10px;
}
lbh-select label {
width: 100% !important;
text-shadow: none !important;
color: #000 !important;
text-align: left !important;
clear: both;
padding: 0 5px 0 50px;
}
lbh-select label input + span {
width: 20px !important;
height: 20px !important;
top: 5px !important;
border-radius: 0 !important;
outline: 1px solid var(--lbh1) !important;
min-width: 20px !important;
margin: 0 10px 0 0 !important;
}
/* ============================================
Modal/Overlay Styles
============================================ */
over-lay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
over-lay modal-win {
background: #CCC;
width: 400px;
padding: 20px;
display: block;
position: relative;
font-size: 18px;
}
over-lay modal-win p {
color: #000;
font-size: 18px;
margin: 35px 0 20px 0;
}
over-lay modal-win input {
background: #FFF;
width: 100%;
appearance: none;
border: none !important;
border-radius: 0 !important;
outline: none !important;
font-size: 18px;
pointer-events: all;
}
over-lay modal-head {
background: var(--lbh2);
width: 420px;
position: absolute;
top: 0;
left: 0;
text-align: center;
color: #FFF;
padding: 10px;
display: block;
}
over-lay modal-win button {
background: var(--lbh1);
width: 40%;
appearance: none;
border: none !important;
border-radius: 0 !important;
outline: none !important;
font-size: 18px;
color: #FFF;
padding: 10px;
margin: 20px 0 0 0;
cursor: pointer;
pointer-events: all;
}
over-lay modal-win button:hover {
background: #000;
}
over-lay modal-win button + button {
float: right;
}
/* ============================================
Internal Header
============================================ */
.lbh-internal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 0 0 20px 0;
flex-wrap: wrap;
}
.lbh-internal-header__title {
flex: 1 1 auto;
min-width: 240px;
}
.lbh-internal-header__title .elementor-heading-title {
margin: 0;
color: var(--lbh1);
}
.lbh-internal-header__profile {
flex: 0 1 auto;
margin-left: auto;
}
.lbh-internal-profile {
display: flex;
align-items: center;
gap: 16px;
flex-direction: row-reverse;
text-align: right;
}
.lbh-internal-profile .elementor-author-box__avatar img {
width: 60px;
height: auto;
display: block;
border-radius: 50%;
}
.lbh-internal-profile .elementor-author-box__name {
margin: 0;
font-size: 20px;
color: var(--lbh1);
}
.lbh-internal-profile .elementor-author-box__bio p {
margin: 0;
color: var(--lbh1);
}
.lbh-internal-profile [data-lbh-internal-name].is-empty,
.lbh-internal-profile [data-lbh-internal-email].is-empty {
color: #999;
}
@media (max-width: 767px) {
.lbh-internal-header {
flex-direction: column;
align-items: flex-start;
}
.lbh-internal-header__profile {
margin-left: 0;
}
.lbh-internal-profile {
flex-direction: row;
text-align: left;
}
}
/* ============================================
Tab Styles
============================================ */
lbh-tabs {
width: 100%;
display: block;
border: 1px solid var( --e-global-color-primary );
border-width: 2px 2px 2px 2px;
border-color: var( --e-global-color-primary );
padding: 30px 30px 30px 30px;
color: var(--e-global-color-primary);
}
lbh-tabzeile {
display: flex;
justify-content: space-between;
gap: 1px;
background: var(--lbh1);
}
lbh-tabzeile a {
width: 100%;
}
lbh-tab,
lbh-tab-mobile {
width: 100%;
padding: 20px;
background: var(--lbh1);
color: #fff;
display: block;
text-align: center;
cursor: pointer;
}
lbh-tab-mobile {
display: none;
padding: 10px;
}
lbh-tab:hover,
lbh-tab-mobile:hover {
background: #EEF;
color: var(--lbh1);
}
lbh-tab.on,
lbh-tab-mobile.on {
background: var(--lbh2);
color: #fff;
}
lbh-tab-box {
display: none;
text-align: center;
border: 2px solid var(--e-global-color-primary);
box-sizing: border-box;
}
lbh-tab-box.on {
display: block;
padding: 20px;
}
/* Sub-Tabs (innerhalb von Tab 1) */
lbh-sub-tabzeile {
display: flex;
justify-content: space-between;
gap: 1px;
margin-bottom: 20px;
background: var(--lbh1);
}
lbh-sub-tab {
width: 100%;
padding: 20px;
background: var(--lbh1);
color: #fff;
display: block;
text-align: center;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
lbh-sub-tab:hover {
background: #EEF;
color: var(--lbh1);
}
lbh-sub-tab.on {
background: var(--lbh2);
color: #FFF;
}
lbh-sub-tabs {
width: 100%;
display: block;
}
lbh-sub-tab-box {
display: none;
text-align: left;
}
lbh-sub-tab-box.on {
display: block;
}
lbh-sub-tab-box > p,
lbh-sub-tab-box .lbh-azubi-hint {
text-align: center;
}
/* ============================================
News Styles
============================================ */
.lbh-news {
width: 100%;
display: block;
position: relative;
}
.lbh-news + .lbh-news {
margin-top: 30px;
}
.lbh-news:hover lbh-news-box {
background: var(--lbh1);
color: #FFF;
}
lbh-news-datum {
width: 75px;
display: block;
position: absolute;
top: -15px;
left: 0;
box-shadow: 3px 3px 8px rgba(200, 200, 200, 0.2);
}
lbh-news-tag {
width: 100%;
display: flex;
background: var(--e-global-color-secondary);
align-items: center;
justify-content: center;
color: #FFF;
font-size: 24px;
font-weight: 900;
height: 34px;
}
lbh-news-monat {
width: 100%;
display: flex;
background: var(--lbh1);
align-items: center;
justify-content: center;
color: #FFF;
font-size: 24px;
font-weight: 900;
height: 34px;
}
lbh-news-box {
width: calc(100% - 60px);
display: block;
background: #EEF;
color: var(--lbh1);
font-size: 18px;
min-height: 85px;
max-height: 112px;
margin: 15px 60px 0 60px;
padding: 10px 10px 10px 35px;
line-height: 31px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border: 2px solid var(--lbh1);
}
lbh-news-box b {
font-size: 20px;
color: #F28C00;
}
/* ============================================
Azubi Styles
============================================ */
.lbh-azubi-section {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 20px;
box-shadow: none;
}
.lbh-azubi-section h3 {
margin: 0 0 10px;
font-size: 1.2rem;
font-weight: 600;
color: var(--lbh1);
}
.lbh-azubi-hint {
margin: 0 0 15px;
font-size: 0.95rem;
line-height: 1.5;
}
.lbh-azubi-import-list {
display: flex;
flex-direction: column;
gap: 1px;
max-height: 420px;
overflow-y: auto;
padding: 0;
background: transparent;
border-radius: 0;
border: none;
box-shadow: none;
}
.lbh-azubi-import-list > azubi-item {
background: #EEF;
color: var(--lbh1);
border-color: transparent;
}
azubi-box {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Accordion für Azubis & Mitarbeiter */
.lbh-person-group {
margin-bottom: 0;
}
.lbh-person-group__header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--lbh1);
color: #fff;
padding: 12px 20px;
font-size: 1.05rem;
font-weight: 500;
cursor: pointer;
list-style: none; /* native details arrow hide */
transition: background-color 0.2s ease;
}
.lbh-person-group__header::-webkit-details-marker {
display: none;
}
.lbh-person-group__header:hover {
background: var(--e-global-color-primary);
}
.lbh-person-group__arrow {
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background: var(--e-global-color-secondary);
color: #fff;
border-radius: 4px;
transition: transform 0.3s ease;
}
.lbh-person-group__arrow::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
margin-bottom: 4px;
}
.lbh-person-group[open] .lbh-person-group__arrow {
transform: rotate(180deg);
}
.lbh-person-group[open] .lbh-person-group__header {
margin-bottom: 0;
}
azubi-list {
display: flex;
flex-direction: column;
gap: 1px;
padding: 0;
background: transparent;
border-radius: 0;
border: 2px solid var(--e-global-color-primary);
box-shadow: none;
max-height: 460px;
overflow-y: auto;
}
azubi-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 20px;
border-radius: 0;
border: none;
background: #EEF;
color: var(--lbh1);
font-weight: 400;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
text-align: left;
}
azubi-item.gone {
background: #999;
color: #FFF;
opacity: 0.7;
}
azubi-item.on {
background: var(--e-global-color-secondary) !important;
color: #FFF !important;
}
azubi-item:hover {
background: var(--lbh1);
color: #FFF;
}
azubi-item.on:hover {
background: var(--e-global-color-secondary) !important;
color: #FFF !important;
}
.azubi-meldung-item.status-pending {
background: #EEF;
color: var(--lbh1);
}
.azubi-meldung-item.status-pending:hover {
background: var(--lbh1);
color: #FFF;
}
.azubi-meldung-item.status-accepted {
background: #EEF;
color: var(--lbh1);
opacity: 0.8;
}
.azubi-meldung-item.status-accepted:hover {
background: var(--lbh1);
color: #FFF;
}
.azubi-meldung-item.status-rejected {
background: #EEF;
color: var(--lbh1);
opacity: 0.6;
}
.azubi-meldung-item.status-rejected:hover {
background: var(--lbh1);
color: #FFF;
}
.azubi-item__name {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.azubi-account-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: 0.5rem;
border-radius: 50%;
font-size: 0.75rem;
font-weight: bold;
background: #10b981;
color: #ffffff;
flex-shrink: 0;
}
.azubi-account-icon--no {
background: #ef4444;
}
.azubi-person-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-right: 0.5rem;
border-radius: 50%;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
background: var(--lbh1);
border: 1px solid var(--lbh2);
}
.azubi-person-icon--employee {
background: #2563eb;
}
.azubi-person-icon--self {
background: var(--lbh2);
}
.azubi-person-icon--meldung {
background: #f59e0b;
}
.azubi-detail.is-employee .azubi-field--azubi,
.azubi-detail.is-employee .azubi-field--training {
display: none !important;
}
.azubi-detail:not(.is-employee) .azubi-field--employee {
display: none !important;
}
.azubi-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.75rem;
margin-left: auto;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
background: rgba(15, 23, 42, 0.08);
color: var(--lbh1);
border: 1px solid var(--lbh1);
}
azubi-item:hover .azubi-chip,
azubi-item.on .azubi-chip {
background: rgba(255, 255, 255, 0.2);
color: #FFF;
}
.azubi-meldung-item.status-accepted .azubi-chip {
background: rgba(15, 23, 42, 0.12);
color: var(--lbh1);
}
.azubi-meldung-item.status-rejected .azubi-chip {
background: rgba(15, 23, 42, 0.08);
color: var(--lbh1);
}
.azubi-meldung-item.status-accepted:hover .azubi-chip,
.azubi-meldung-item.status-rejected:hover .azubi-chip {
background: rgba(255, 255, 255, 0.2);
color: #FFF;
}
.azubi-meldung-item.status-pending .azubi-chip {
background: rgba(255, 255, 255, 0.25);
color: #FFF;
}
.azubi-chip--muted {
background: rgba(255, 255, 255, 0.15);
color: var(--lbh1);
}
lbh-block.azubi-detail {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1.5rem;
min-height: 220px;
background: #EEF;
border-radius: 0;
border: 1px dashed rgba(59, 130, 246, 0.35);
color: var(--lbh1);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02);
}
lbh-block.azubi-detail strong {
color: #1f2937;
}
azubi-box button {
width: auto;
min-width: 180px;
height: auto;
line-height: 1;
padding: 0.75rem 1.5rem;
margin: 0;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--lbh1);
background-image: none !important;
color: #ffffff;
border: none;
box-shadow: 0 4px 6px rgba(37, 70, 204, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
azubi-box button:hover,
azubi-box button:focus {
background: var(--lbh2) !important;
background-image: none !important;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(37, 70, 204, 0.3);
filter: brightness(1.05);
}
.lbh-azubi-action-blue {
background: var(--lbh1) !important;
background-image: none !important;
box-shadow: 0 4px 6px rgba(37, 70, 204, 0.25) !important;
}
.lbh-azubi-action-blue:hover,
.lbh-azubi-action-blue:focus {
background: var(--lbh2) !important;
background-image: none !important;
box-shadow: 0 6px 8px rgba(37, 70, 204, 0.3) !important;
}
#azubi-save-button,
#azubi-save-button-meldung {
display: block;
width: auto;
min-width: 180px;
height: auto;
line-height: 1;
padding: 0.75rem 1.5rem;
margin: 15px auto 0 auto;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--lbh1) !important;
background-image: none !important;
color: #ffffff;
border: none;
box-shadow: 0 4px 6px rgba(37, 70, 204, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#azubi-save-button:hover,
#azubi-save-button:focus,
#azubi-save-button-meldung:hover,
#azubi-save-button-meldung:focus {
background: var(--lbh2) !important;
background-image: none !important;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(37, 70, 204, 0.3);
filter: brightness(1.05);
}
azubi-box button#azubi-save-button,
azubi-box button#azubi-save-button-meldung {
background: var(--lbh1) !important;
background-image: none !important;
}
azubi-box button#azubi-save-button:hover,
azubi-box button#azubi-save-button:focus,
azubi-box button#azubi-save-button-meldung:hover,
azubi-box button#azubi-save-button-meldung:focus {
background: var(--lbh2) !important;
background-image: none !important;
}
azubi-box button:focus-visible {
outline: 3px solid rgba(59, 130, 246, 0.35);
outline-offset: 4px;
}
.lbh-azubi-action {
align-self: flex-start;
}
.azubi-detail form {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ============================================
Modal Styles
============================================ */
.lbh-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
align-items: center;
justify-content: center;
}
.lbh-modal.active {
display: flex;
}
.lbh-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
.lbh-modal-content {
position: relative;
background: #FFF;
border-radius: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
max-width: 90%;
max-height: 90vh;
width: 100%;
max-width: 800px;
display: flex;
flex-direction: column;
z-index: 10001;
overflow: hidden;
}
.lbh-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
background: var(--lbh1);
color: #FFF;
}
.lbh-modal-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: #FFF;
}
.lbh-modal-close {
background: none;
border: none;
font-size: 2rem;
line-height: 1;
color: #FFF;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
transition: background-color 0.2s;
}
.lbh-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.lbh-modal-body {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.lbh-modal-body,
.lbh-modal-body p,
.lbh-modal-body label,
.lbh-modal-body span,
.lbh-modal-body input,
.lbh-modal-body textarea,
.lbh-modal-body select {
color: var(--lbh1);
}
.lbh-modal-body form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lbh-modal-body #azubi-save-button,
.lbh-modal-body #azubi-save-button-meldung {
align-self: center;
margin-top: 1rem;
}
/* ============================================
Häufige Suchen Styles
============================================ */
lbh-haeufige-suchen {
width: 100%;
float: left;
margin: 0 0 15px 0;
padding: 10px 15px;
background: #F5F5F5;
border-radius: 5px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
lbh-haeufige-suchen span {
font-weight: bold;
margin-right: 10px;
}
lbh-haeufige-suchen a.haeufige-suche {
display: inline-block;
margin: 0 8px 5px 0;
padding: 5px 12px;
background: var(--lbh1);
color: #FFF;
border-radius: 20px;
text-decoration: none;
font-size: 14px;
transition: background-color 0.2s ease;
}
lbh-haeufige-suchen a.haeufige-suche:hover {
background: var(--lbh2);
color: #FFF;
}
/* ============================================
Form Styles
============================================ */
form > p {
line-height: 26px;
}
form#firmenmeldung,
form#personenmeldung {
display: none;
}
form#firmenmeldung.on,
form#personenmeldung.on {
display: block;
}
h2.lbh-form {
color: #FFF;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.tab-box > a {
width: calc(100% - 120px) !important;
float: left !important;
margin-top: 5px;
}
.tab-box > a + button {
width: 80px !important;
margin: 5px 5px 0 5px !important;
float: left;
}
.tab-box > a + button.grau {
background: none;
pointer-events: none;
}
button + .eimer:hover {
background-color: #EEF;
color: var(--lbh1);
}
label i {
margin: 0 0 0 5px;
font-style: normal !important;
color: #F00 !important;
}
#lbh-confirmation,
#lbh-registrierung {
display: none;
}
form {
outline: none !important;
}
form + form {
margin-top: 10px;
}
p.lbh {
margin: 0 0 5px 0;
}
p.lbh > span {
width: 90px;
display: inline-block;
}
#toggle_payment {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
}
#toggle_payment .lbh-toggle-icon {
font-size: 36px;
line-height: 1;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
#toggle_payment .lbh-toggle-label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
margin: 0;
}
#toggle_payment .lbh-toggle-label input[type="hidden"] {
display: none;
}
#toggle_payment .lbh-toggle-checkbox {
margin: 0;
width: 20px;
height: 20px;
min-width: 20px;
max-width: 20px;
border: 2px solid currentColor;
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
background: transparent;
transition: background-color 0.15s, background-image 0.15s;
}
#toggle_payment .lbh-toggle-checkbox.checked {
background-color: currentColor;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%23fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 10l4 4 8-8"/%3E%3C/svg%3E');
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
#toggle_payment:hover {
color: var(--e-global-color-secondary);
}
#other_payment {
max-height: 0 !important;
overflow: hidden !important;
transition: 0.2s !important;
display: block !important;
width: 100% !important;
min-width: 100% !important;
box-sizing: border-box;
}
#other_payment.on {
max-height: 2000px !important;
overflow: visible !important;
}
#other_payment lbh-block {
--lbh-form-label-width: 180px;
}
#other_payment lbh-block label > p {
min-width: var(--lbh-form-label-width);
max-width: var(--lbh-form-label-width);
flex-basis: var(--lbh-form-label-width);
}
@media (max-width: 768px) {
#other_payment lbh-block {
--lbh-form-label-width: 100%;
padding-inline: 12px;
}
#other_payment lbh-block label {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
#other_payment lbh-block label > p {
margin: 0;
text-align: left;
justify-content: flex-start;
}
#other_payment lbh-block label input,
#other_payment lbh-block label select,
#other_payment lbh-block label textarea {
margin: 0;
}
}
.lbh_contract {
width: 42px;
min-width: 42px;
height: 42px;
border-radius: 8px;
background-color: var(--lbh1);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
box-shadow: 0 6px 16px rgba(11, 83, 148, 0.25);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lbh_contract:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(11, 83, 148, 0.35);
}
.azubi-contract-actions {
display: inline-flex;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.azubi-contract-remove {
width: 42px;
min-width: 42px;
height: 42px;
border-radius: 8px;
background-color: #c4332a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' version='1.1' viewBox='0 0 408.483 408.483' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M87.748,388.784c0.461,11.01,9.521,19.699,20.539,19.699h191.911c11.018,0,20.078-8.689,20.539-19.699l13.705-289.316 H74.043L87.748,388.784z M247.655,171.329c0-4.61,3.738-8.349,8.35-8.349h13.355c4.609,0,8.35,3.738,8.35,8.349v165.293 c0,4.611-3.738,8.349-8.35,8.349h-13.355c-4.61,0-8.35-3.736-8.35-8.349V171.329z M189.216,171.329 c0-4.61,3.738-8.349,8.349-8.349h13.355c4.609,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.737,8.349-8.349,8.349h-13.355 c-4.61,0-8.349-3.736-8.349-8.349V171.329L189.216,171.329z M130.775,171.329c0-4.61,3.738-8.349,8.349-8.349h13.356 c4.61,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.738,8.349-8.349,8.349h-13.356c-4.61,0-8.349-3.736-8.349-8.349V171.329z'/%3E%3Cpath d='M343.567,21.043h-88.535V4.305c0-2.377-1.927-4.305-4.305-4.305h-92.971c-2.377,0-4.304,1.928-4.304,4.305v16.737H64.916 c-7.125,0-12.9,5.776-12.9,12.901V74.47h304.451V33.944C356.467,26.819,350.692,21.043,343.567,21.043z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
box-shadow: 0 6px 16px rgba(196, 51, 42, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.azubi-contract-remove input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.azubi-contract-remove__icon {
display: none;
}
.azubi-contract-remove:hover {
background-color: #d94137;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(196, 51, 42, 0.35);
}
.azubi-contract-remove input:checked ~ .azubi-contract-remove__icon {
filter: saturate(1.5);
}
.azubi-contract-remove:has(input:checked) {
filter: saturate(1.5);
}
/* ============================================
Responsive Media Queries
============================================ */
@media (max-width: 992px) {
lbh-veranstaltung {
margin-left: 0;
padding: 15px;
}
lbh-bild {
position: relative;
top: auto;
left: auto;
width: 100%;
margin-bottom: 15px;
}
lbh-titel,
lbh-thema,
lbh-kategorie {
margin-left: 0;
margin-top: 10px;
}
.lbh-card-detail-link {
margin: 0 0 15px 0;
}
lbh-veranstaltung .lbh-card-detail-link {
margin: 15px 0 10px 0;
text-align: right;
}
lbh-card-detail-button,
.lbh-card-detail-button {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
lbh-buttons,
.lbh-buttons {
width: 100%;
margin: 10px 0 0 0;
flex-direction: column;
align-items: stretch;
padding: 0 0;
}
lbh-buttons a,
.lbh-buttons a {
width: 100%;
min-width: 100%;
padding-left: 50px;
padding-right: 50px;
}
lbh-info {
width: 100%;
margin: 10px 0 0 0;
}
.px-event-detail__materials--inline {
width: 100%;
margin: 15px 0 0 0;
float: none;
}
lbh-betriebe {
gap: 1%;
}
lbh-betriebe lbh-block {
width: 48%;
}
}
@media (max-width: 768px) {
[data-lbh-event-list] lbh-veranstaltung a::before,
[data-lbh-event-list] lbh-veranstaltung a::after,
[data-lbh-event-list] .lbh-card-detail-button::before,
[data-lbh-event-list] .lbh-card-detail-button::after,
[data-lbh-event-list] lbh-buttons a::before,
[data-lbh-event-list] lbh-buttons a::after {
content: none !important;
display: none !important;
}
[data-lbh-event-list] lbh-veranstaltung a.sonderling {
margin: 10px auto 0;
top: auto;
left: auto;
padding-left: 0 !important;
width: 100%;
max-width: 320px;
}
[data-lbh-event-list] .lbh-card-detail-link {
text-align: center;
}
[data-lbh-event-list] .lbh-card-detail-button {
float: none;
margin: 0 auto !important;
padding-left: 0;
padding-right: 0;
width: 100% !important;
max-width: 320px;
}
[data-lbh-event-list] lbh-buttons a {
margin: 0 auto;
padding-left: 0;
padding-right: 0;
width: 100%;
max-width: 320px;
}
lbh-suche {
width: 100%;
padding: 15px 15px 20px 15px;
margin-bottom: 30px;
}
lbh-suche h3 {
padding-right: 0;
margin-bottom: 15px;
font-size: 20px;
}
lbh-suche label {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
}
lbh-suche label span {
width: 100%;
flex-direction: column;
gap: 8px;
}
lbh-suche input,
lbh-suche select {
width: 100% !important;
font-size: 16px;
}
lbh-suche input[type="date"] {
width: 100% !important;
}
lbh-suche button,
lbh-suche button#v_suche_los {
position: relative !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
left: auto !important;
margin: 15px 0 0 0 !important;
width: 100% !important;
height: 50px !important;
line-height: 50px !important;
}
lbh-suche button#v_suche_los::before {
display: none !important;
}
lbh-suche .lbh-filter-reset {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
margin: 10px 0 0 0 !important;
width: 100% !important;
height: 50px !important;
line-height: 50px !important;
padding: 0 !important;
font-size: 14px !important;
}
lbh-suche .lbh-filter-reset::before {
display: none !important;
}
lbh-betriebe lbh-block {
width: 100%;
}
lbh-termine {
flex-direction: column;
}
lbh-termine p {
width: 100%;
}
lbh-news-box {
margin-left: 0;
width: calc(100% - 90px);
}
azubi-box {
grid-template-columns: 1fr;
}
azubi-list,
.lbh-azubi-import-list {
max-height: 340px;
}
.lbh-registration-actions {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.lbh-registration-actions__col:nth-child(2),
.lbh-registration-actions__col:nth-child(3) {
justify-content: stretch;
}
.lbh-registration-actions__col button {
width: 100%;
}
}
@media (max-width: 576px) {
lbh-veranstaltung {
padding: 10px;
}
lbh-bild {
height: 150px;
}
lbh-titel {
font-size: 18px;
}
lbh-thema {
font-size: 16px;
min-height: auto;
}
lbh-news-box {
margin-left: 0;
width: calc(100% - 60px);
max-height: 205px;
}
.lbh-azubi-section {
padding: 1.5rem;
}
azubi-box button {
width: 100%;
justify-content: center;
}
lbh-betriebe,
lbh-tn label {
flex-direction: column;
}
lbh-tn label {
gap: 10px;
}
lbh-betriebe lbh-block {
width: 100%;
}
lbh-tn label * {
justify-content: flex-start;
width: 100% !important;
text-align: left !important;
margin: 0 !important;
}
lbh-suche {
padding: 12px;
margin-bottom: 20px;
}
lbh-suche h3 {
font-size: 18px;
margin-bottom: 12px;
}
lbh-suche label input,
lbh-suche label select,
lbh-suche label span,
lbh-termine > p {
width: 100%;
}
lbh-suche label {
flex-direction: column;
gap: 8px;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 8px;
}
lbh-suche input,
lbh-suche select {
font-size: 14px;
height: 44px;
}
lbh-suche button,
lbh-suche button#v_suche_los,
lbh-suche .lbh-filter-reset {
height: 44px !important;
line-height: 44px !important;
font-size: 14px !important;
margin-top: 12px !important;
}
lbh-info {
width: 100%;
margin: 10px 0 0 0;
}
lbh-info {
margin: 10px 0 0 0;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lbh-info-card {
padding: 16px;
}
.lbh-info-card__value p {
width: 100%;
min-width: 100%;
padding: 0;
}
lbh-veranstaltung {
margin-left: 0;
}
lbh-veranstaltung lbh-titel,
lbh-veranstaltung lbh-thema,
lbh-veranstaltung lbh-kategorie {
margin: 5px 0;
}
lbh-veranstaltung lbh-thema {
min-height: 0;
}
lbh-veranstaltung lbh-bild {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
box-shadow: none;
margin: 0 auto 10px auto;
}
lbh-buttons,
.lbh-buttons {
gap: 15px;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 0 10px 0;
padding: 0 20px;
}
lbh-buttons a,
.lbh-buttons a {
min-width: 290px !important;
width: 290px !important;
padding-left: 50px;
padding-right: 50px;
}
lbh-news-box {
margin-left: 0;
width: calc(100% - 80px);
padding: 8px;
font-size: 16px;
}
lbh-news-datum {
width: 60px;
}
lbh-haeufige-suchen {
flex-direction: column;
align-items: flex-start;
}
lbh-haeufige-suchen a.haeufige-suche {
margin-right: 0;
width: 100%;
text-align: center;
}
}
.lbh-empty-registrations {
margin: 2rem auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
min-height: 200px;
position: relative;
}
.lbh-empty-registrations .lbh-azubi-action {
align-self: flex-start;
margin-top: auto;
position: absolute;
bottom: 0;
left: 0;
padding: 0.75rem 1.5rem;
}
.lbh-empty-registrations__cta {
min-width: 220px;
display: inline-flex;
justify-content: center;
text-decoration: none;
}
@media only screen and (max-width: 475px) {
lbh-news-box {
width: calc(100% - 60px);
max-height: 205px;
}
}
.azubi-field--employee {
display: none;
}
/* ============================================
Modal Enhancements
============================================ */
body.lbh-modal-open {
overflow: hidden;
}
.lbh-private-billing,
.lbh-company-invoice {
margin-bottom: 1.25rem;
}
.lbh-registration-company-section {
text-align: left;
}
.lbh-registration-company-section h3 {
margin-bottom: 0.75rem;
}
.lbh-registration-company-section .v_teilnehmer_block {
max-width: 100%;
margin: 0;
}
.lbh-company-invoice {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
width: 100%;
text-align: left;
}
.lbh-invoice-summary {
border: 1px solid #e3e3e3;
border-radius: 8px;
padding: 1rem;
background: #fff;
text-align: left;
}
.lbh-company-invoice .lbh-invoice-summary {
width: 100%;
}
.lbh-invoice-summary__content p {
margin: 0 0 0.35rem;
line-height: 1.4;
}
.lbh-invoice-summary__content p:last-child {
margin-bottom: 0;
}
.lbh-invoice-edit-button {
margin-top: 0.75rem;
width: auto;
max-width: 100%;
height: auto;
line-height: 1.3;
white-space: normal;
padding: 0.65rem 1.5rem;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
}
.lbh-company-registration {
display: block;
margin: 1rem 0;
}
/* Anmeldungen im Account: schmaler, moderner, ohne Card-in-Card */
.ajax-update-registration {
--lbh-reg-border: rgba(34, 48, 126, 0.24);
--lbh-reg-border-strong: rgba(34, 48, 126, 0.38);
--lbh-reg-surface: #fff;
--lbh-reg-surface-soft: #f5f7ff;
--lbh-reg-shadow: 0 14px 34px rgba(34, 48, 126, 0.09);
width: min(100%, 900px);
margin: 1.35rem auto;
}
.ajax-update-registration > lbh-tn.intern {
background: var(--lbh-reg-surface);
border: 1px solid var(--lbh-reg-border-strong);
border-radius: 0;
box-shadow: var(--lbh-reg-shadow);
max-height: 44px;
padding: 0;
}
.ajax-update-registration > lbh-tn.intern.on {
max-height: 9000px;
padding: 56px 18px 18px;
}
.ajax-update-registration > lbh-tn.intern > lbh-tn-data.lbh-schalter {
height: 44px;
border-radius: 0;
font-weight: 600;
letter-spacing: 0.01em;
}
.ajax-update-registration > lbh-tn.intern > lbh-tn-data.lbh-schalter > a {
border-radius: 0;
}
.ajax-update-registration > lbh-tn.intern > lbh-block.person,
.ajax-update-registration > lbh-tn.intern > lbh-block.lbh-registration-company-section {
background: transparent;
border: 0;
padding: 0;
max-width: 820px;
margin: 0 auto;
}
.ajax-update-registration > lbh-tn.intern > lbh-block.lbh-registration-company-section h3 {
margin: 0 0 0.7rem;
color: var(--lbh1);
}
.ajax-update-registration .lbh-registration-company-section .v_teilnehmer_block > lbh-tn {
background: var(--lbh-reg-surface-soft);
border: 1px solid var(--lbh-reg-border);
border-radius: 0;
box-shadow: none;
padding: 0;
}
.ajax-update-registration .lbh-registration-company-section .v_teilnehmer_block > lbh-tn.on {
padding: 44px 10px 10px;
}
.ajax-update-registration .lbh-registration-company-section .v_teilnehmer_block > lbh-tn > lbh-tn-data {
border-radius: 0;
}
.ajax-update-registration .lbh-registration-company-section .lbh-message.info {
margin-top: 0.7rem;
padding: 0.65rem 0.9rem;
border-radius: 0;
border: 1px solid rgba(34, 48, 126, 0.14);
background: #f2f6ff;
}
.ajax-update-registration .lbh-registration-company-section .lbh-company-invoice {
max-width: 600px;
}
.ajax-update-registration .lbh-registration-company-section .lbh-invoice-summary {
background: #fff;
border: 1px solid var(--lbh-reg-border);
border-radius: 0;
box-shadow: none;
}
.lbh-registration-invoice-accordion {
width: min(100%, 680px);
margin: 12px auto 0;
border: 1px solid var(--lbh-reg-border-strong);
border-radius: 0;
background: #EEF;
box-shadow: none;
max-height: 42px;
padding: 0;
}
.lbh-registration-invoice-accordion.on {
padding: 42px 0 0;
background: #EEF;
}
.lbh-registration-invoice-accordion lbh-tn-data {
height: 42px;
border-radius: 0;
padding: 0 40px;
justify-content: center;
text-align: center;
}
.lbh-registration-invoice-accordion > lbh-block.lbh-registration-company-section {
width: 100%;
max-width: none;
margin: 0;
padding: 12px 14px;
border: 0;
background: transparent;
}
.lbh-registration-invoice-accordion .lbh-company-invoice {
max-width: 100%;
margin: 0 auto;
}
.lbh-registration-invoice-accordion .lbh-invoice-summary {
border: 0;
border-radius: 0;
background: transparent;
padding: 0.6rem 0 0.3rem;
text-align: center;
}
.lbh-registration-invoice-accordion .lbh-invoice-summary__content,
.lbh-registration-invoice-accordion .lbh-invoice-summary__content p {
text-align: center;
}
.lbh-registration-invoice-accordion .lbh-invoice-edit-button {
margin-top: 0.45rem;
}
.ajax-update-registration .lbh-registration-actions {
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(34, 48, 126, 0.14);
}
.ajax-update-registration .lbh-registration-actions__col:nth-child(2) button {
min-width: 230px;
border-radius: 0;
}
@media (max-width: 768px) {
.ajax-update-registration {
width: 100%;
}
.ajax-update-registration > lbh-tn.intern {
border-radius: 0;
max-height: 44px;
padding: 0;
}
.ajax-update-registration > lbh-tn.intern.on {
max-height: 9000px;
padding: 54px 12px 14px;
}
.ajax-update-registration > lbh-tn.intern > lbh-block.person,
.ajax-update-registration > lbh-tn.intern > lbh-block.lbh-registration-company-section {
max-width: 100%;
}
.lbh-registration-invoice-accordion {
width: 100%;
}
.lbh-registration-invoice-accordion.on {
padding: 42px 0 0;
}
.lbh-registration-invoice-accordion > lbh-block.lbh-registration-company-section {
padding: 10px;
}
.lbh-registration-invoice-accordion .lbh-company-invoice {
max-width: 100%;
}
}
.lbh-company-registration__body {
border: 1px solid #d7d7d7;
border-radius: 8px;
padding: 1rem 1.25rem;
background: #fff;
}
.lbh-company-registration__hint {
font-size: 0.9rem;
color: #4f4f4f;
margin-bottom: 0.75rem;
}
.bl.ghost,
a.bl.ghost {
background: transparent;
color: var(--lbh1);
border: 1px solid var(--lbh1);
}
.bl.ghost:hover,
a.bl.ghost:hover {
background: var(--lbh1);
color: #fff;
}
.px-event-detail {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
padding: 2rem;
margin: 2rem auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
max-width: 1100px;
}
.px-event-detail__back {
margin-bottom: 2rem;
width:100%;
align-items: end;
display: flex;
}
.px-event-detail__back-link {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
color: var(--lbh1);
text-decoration: none;
}
.px-event-detail__back-link:hover {
text-decoration: underline;
}
.px-event-detail__hero {
border-bottom: 1px solid #eee;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
display: flex;
align-items: flex-start;
gap: 2rem;
width: 100%;
}
.px-event-detail__visual {
position: relative;
flex: 0 0 33%;
width: 33%;
}
.px-event-detail__visual lbh-bild {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0;
left: 0;
box-shadow: 3px 3px 8px rgba(200, 200, 200, 0.2);
background-size: cover;
background-position: center;
background-color: #ccc;
}
.px-event-detail__visual lbh-flag {
position: absolute;
bottom: 10px;
left: 15px;
}
.px-event-detail__summary {
flex: 0 0 66%;
width: 66%;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.px-event-detail__details {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2rem;
}
.px-event-detail__details lbh-termine p lbh-termin a {
padding-left: 10px !important;
padding-right: 10px !important;
}
.px-event-detail__badge {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #777;
margin-bottom: 0.35rem;
}
.px-event-detail__topic {
font-size: 1.1rem;
color: #646464;
margin-bottom: 1rem;
}
.px-event-detail__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem 1.25rem;
padding: 0;
margin: 0;
list-style: none;
}
.px-event-detail__facts li {
border: 1px solid #eee;
border-radius: 10px;
padding: 0.75rem 0.9rem;
background: #fafafa;
}
.px-event-detail__facts strong {
display: block;
font-size: 0.78rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.35rem;
}
.px-event-detail__facts span {
font-size: 0.95rem;
color: #242424;
}
.px-event-detail__slots {
margin-bottom: 0;
}
.px-event-detail__slots-label {
font-weight: 600;
margin-bottom: 0.4rem;
color: var(--lbh1);
}
.px-event-detail__slots lbh-termine {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.px-event-detail__slots lbh-termine p {
margin: 0;
width: auto;
max-width: 420px;
}
.px-event-detail__description p {
margin: 0 0 1rem;
}
.px-event-detail__cta {
display: flex;
gap: 0;
flex-wrap: wrap;
margin-top: 0;
}
.px-event-detail__cta-btn {
position: relative;
padding: 0;
margin: 0;
text-align: center;
width: 260px !important;
height: 60px;
line-height: 60px;
background: var(--lbh1);
color: #FFF;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 1px;
text-transform: uppercase;
border: none;
border-radius: 0;
text-decoration: none;
display: inline-block;
transition: none !important;
z-index: 1;
}
.px-event-detail__cta-btn:first-child {
margin-left: 0;
padding-left: 0;
}
.px-event-detail__cta-btn:first-child::before {
display: none;
}
.px-event-detail__cta-btn:nth-child(2) {
margin-right: 60px;
padding-right: 30px;
}
.px-event-detail__cta-btn:nth-child(2)::before {
content: '';
position: absolute;
transform: skewX(45deg) !important;
right: -30px;
top: 0;
width: 60px;
height: 60px;
background: var(--lbh1);
z-index: -1;
}
.px-event-detail__cta-btn:nth-child(2):hover::before {
background: var(--lbh2);
}
.px-event-detail__cta-btn:not(:nth-child(2))::before {
display: none;
}
.px-event-detail__cta-btn:hover {
background: var(--lbh2);
color: #FFF;
}
.px-event-detail__cta-btn.ghost {
background: transparent;
color: var(--lbh1);
border: 1px solid var(--lbh1);
}
.px-event-detail__cta-btn.ghost::before {
display: none;
}
.px-event-detail__cta-btn.ghost:hover {
background: var(--lbh2);
color: #FFF;
}
.px-event-detail__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.px-event-detail__info-section {
margin-bottom: 2rem;
}
.px-event-detail__content {
display: flex;
flex-direction: column;
width: 100%;
}
.px-event-detail__info label {
display: block;
margin-bottom: 1rem;
}
.px-event-detail__info label p {
margin: 0.2rem 0 0;
}
.px-event-detail__materials {
border-top: 1px solid #eee;
padding-top: 1.5rem;
margin-top: 2rem;
}
.px-event-detail__materials h2,
.px-event-detail__materials h3,
.px-event-materials__group > h3 {
color: var(--lbh1);
}
.px-event-materials__group {
margin-bottom: 1.5rem;
}
.px-event-materials__group ul {
list-style: none;
padding: 0;
margin: 0;
}
.px-event-materials__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 1.1rem;
border: 1px solid #e1e1e1;
border-radius: 10px;
background: #fafafa;
margin-bottom: 0.75rem;
gap: 1rem;
width: 100%;
}
.px-event-materials__info {
display: flex;
flex-direction: column;
gap: 0.15rem;
color: var(--lbh1);
}
.px-event-materials__info a {
color: var(--lbh1);
text-decoration: none;
}
.px-event-materials__info a:hover {
text-decoration: underline;
}
.px-event-materials__download {
width: 40px;
height: 40px;
padding: 0;
text-decoration: none;
display: inline-block;
background: var(--lbh1) url('data:image/svg+xml,') no-repeat center;
background-size: 20px;
border-radius: 8px;
text-indent: -9999px;
overflow: hidden;
transition: background-color 0.2s ease;
}
.px-event-materials__download:hover {
background: #FF8C00 url('data:image/svg+xml,') no-repeat center;;
background-size: 20px;
}
.px-event-materials__download::after {
display: none !important;
content: none !important;
}
.px-event-detail__terms {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.px-event-detail__terms th,
.px-event-detail__terms td {
text-align: left;
padding: 0.65rem 0.55rem;
border-bottom: 1px solid #eee;
}
@media (max-width: 768px) {
.px-event-detail {
padding: 1.25rem;
margin: 1.5rem auto;
}
.px-event-detail__hero {
flex-direction: column;
}
.px-event-detail__visual {
width: 100%;
flex: 0 0 auto;
}
.px-event-detail__visual lbh-bild {
width: 100%;
aspect-ratio: 16 / 9;
}
.px-event-detail__summary {
width: 100%;
flex: 0 0 auto;
}
.px-event-detail__details {
margin-top: 1.5rem;
}
.px-event-detail__cta {
flex-direction: column;
align-items: flex-start;
}
.px-event-detail__cta-btn {
width: 100% !important;
margin: 0 0 10px 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-event-detail__cta-btn:first-child::before {
display: none !important;
}
.px-event-detail__cta-btn:nth-child(2) {
margin-right: 0 !important;
padding-right: 0 !important;
}
.px-event-detail__cta-btn::before {
display: none !important;
}
.px-event-materials__item {
flex-direction: column;
align-items: flex-start;
}
}
dialog.lbh-modal {
padding: 0;
border: none;
background: transparent;
}
.lbh-modal.is-visible,
.lbh-modal[open] {
display: flex;
}
.lbh-modal[open] {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 12000;
align-items: center;
justify-content: center;
}
.lbh-modal::backdrop {
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
}
.lbh-modal__content {
background: #fff;
border-radius: 8px;
box-shadow: 0 18px 55px rgba(15, 23, 42, 0.25);
min-width: min(520px, 92vw);
max-width: 92vw;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Larger modal for invoice form */
.lbh-modal--invoice .lbh-modal__content {
min-width: min(720px, 96vw);
max-width: 96vw;
}
.lbh-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: var(--lbh1, #1c3d5a);
color: #fff;
}
.lbh-modal__header h3 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
}
.lbh-modal__close {
background: none;
border: none;
color: inherit;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
padding: 0;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.lbh-modal__close:hover,
.lbh-modal__close:focus-visible {
background: rgba(255, 255, 255, 0.2);
outline: none;
}
.lbh-modal__body {
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.lbh-modal__body,
.lbh-modal__body p,
.lbh-modal__body label,
.lbh-modal__body span,
.lbh-modal__body input,
.lbh-modal__body textarea,
.lbh-modal__body select {
color: var(--lbh1);
}
.lbh-modal__body p {
margin: 0;
}
.lbh-modal__content lbh-block {
margin: 1.5rem auto;
max-width: 500px;
padding: 1.5rem;
}
/* Modal-only padding override for lbh-block */
.lbh-modal__content lbh-block {
padding: 10px !important;
}
.lbh-modal__content lbh-block label > p {
min-width: var(--lbh-form-label-width);
max-width: var(--lbh-form-label-width);
flex-basis: var(--lbh-form-label-width);
}
.lbh-modal__content form {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1rem;
}
.lbh-modal__content form > p {
text-align: center;
margin-bottom: 1.5rem;
padding: 0 0.5rem;
}
/* Invoice modal: tighter spacing + left-aligned labels */
.lbh-modal--invoice .lbh-invoice-modal-form {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.lbh-modal--invoice .lbh-invoice-modal-form > p {
text-align: left;
margin-bottom: 0.75rem;
padding: 0;
}
.lbh-modal--invoice .lbh-invoice-modal-form lbh-block {
margin: 0;
padding: 1.5rem;
max-width: none;
background: #EEF;
border-radius: 0;
border: 1px dashed rgba(59, 130, 246, 0.35);
color: var(--lbh1);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02);
}
.lbh-modal--invoice .lbh-invoice-modal-form lbh-block label {
justify-content: flex-start;
gap: 10px;
}
.lbh-modal--invoice .lbh-invoice-modal-form lbh-block label > p {
text-align: left;
min-width: var(--lbh-form-label-width);
max-width: var(--lbh-form-label-width);
flex-basis: var(--lbh-form-label-width);
}
.lbh-modal__error {
margin: 0 auto 1.5rem;
padding: 0.875rem 1rem;
background-color: #fee;
border: 1px solid #fcc;
border-radius: 0.375rem;
color: #c33;
font-size: 0.9375rem;
line-height: 1.5;
text-align: center;
max-width: 500px;
width: 100%;
}
.lbh-modal__actions {
display: flex;
justify-content: center;
gap: 0.75rem;
padding: 1.5rem 1.5rem 2rem;
width: 100%;
}
.lbh-modal__actions .button {
min-width: 140px;
padding: 0.625rem 1.5rem;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
border-radius: 0.375rem;
transition: all 0.15s ease-in-out;
}
.lbh-modal__actions .button-primary {
background-color: var(--lbh1, #22307E);
border-color: var(--lbh1, #22307E);
color: #fff;
}
.lbh-modal__actions .button-primary:hover {
background-color: var(--lbh2, #F28C00);
border-color: var(--lbh2, #F28C00);
color: #fff;
}
.lbh-modal__actions .button-secondary {
background-color: #6c757d;
border-color: #6c757d;
color: #fff;
}
.lbh-modal__actions .button-secondary:hover {
background-color: #5c636a;
border-color: #565e64;
color: #fff;
}
.lbh-modal--confirm .lbh-modal__body {
padding-bottom: 0;
}
.lbh-modal--confirm .lbh-modal__actions {
padding-top: 0.25rem;
}
@media (max-width: 640px) {
.lbh-modal__content {
min-width: min(100%, 92vw);
}
.lbh-modal__actions {
flex-direction: column;
align-items: stretch;
}
}
/* ============================================
Account Einstellungen
============================================ */
.lbh-account-email {
margin-top: 1.5rem;
padding: 20px;
background: #EEF;
border: 1px solid var(--lbh1, #22307E);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
color: var(--lbh1);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.lbh-account-email__info {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.lbh-account-email__label {
font-weight: 600;
color: var(--lbh1);
font-size: 18px;
}
.lbh-account-email__value {
font-size: 18px;
color: var(--lbh1);
word-break: break-word;
}
.lbh-account-email__value.is-pending {
color: var(--lbh2, #F28C00);
}
.lbh-account-email__badge {
display: none;
align-items: center;
gap: 0.35rem;
padding: 0.375rem 0.875rem;
border-radius: 0.5rem;
background: linear-gradient(135deg, rgba(242, 140, 0, 0.1), rgba(242, 140, 0, 0.15));
color: var(--lbh2, #F28C00);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.025em;
text-transform: uppercase;
border: 1px solid rgba(242, 140, 0, 0.2);
box-shadow: 0 1px 3px rgba(242, 140, 0, 0.1);
}
.lbh-account-email__badge.is-visible {
display: inline-flex;
}
.lbh-button-secondary {
border: 1px solid var(--lbh1, #22307E);
background: transparent;
color: var(--lbh1, #22307E);
padding: 0.65rem 1.75rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.lbh-button-secondary:hover,
.lbh-button-secondary:focus-visible {
background: var(--lbh1, #22307E);
color: #fff;
outline: none;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(34, 48, 126, 0.25);
}
.lbh-account-alert {
margin-top: 1rem;
padding: 20px;
background: #EEF;
color: var(--lbh1);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.lbh-account-alert strong {
display: block;
margin-bottom: 0.5rem;
font-size: 18px;
color: var(--lbh1);
}
.lbh-account-alert p {
margin: 0 0 0.75rem 0;
font-size: 18px;
line-height: 1.5;
}
.lbh-account-alert .lbh-email-change-cancel {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid var(--lbh1, #22307E);
color: var(--lbh1, #22307E);
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease-in-out;
text-decoration: none;
display: inline-block;
}
.lbh-account-alert .lbh-email-change-cancel:hover {
background: var(--lbh1, #22307E);
color: #fff;
}
/* ============================================
Passwort ändern Tab
============================================ */
.lbh-password-hint {
margin: 1rem 0 0 0;
padding: 0.875rem 1rem;
background: transparent;
border: none;
border-radius: 0;
color: var(--lbh1);
font-size: 0.875rem;
line-height: 1.5;
}
#lbh-password-change-form {
margin-top: 1rem;
}
.lbh-form-error {
margin: 0 0 1rem 0;
padding: 0.875rem 1rem;
background-color: #fee;
border: 1px solid #fcc;
border-radius: 0.375rem;
color: #c33;
font-size: 0.9375rem;
line-height: 1.5;
text-align: center;
max-width: 700px;
width: 100%;
}
#lbh-password-change-form lbh-block {
margin-bottom: 1rem;
}
#lbh-password-change-form lbh-block label > p {
min-width: var(--lbh-form-label-width);
max-width: var(--lbh-form-label-width);
flex-basis: var(--lbh-form-label-width);
}
/* Password Toggle Buttons in lbh-block (analog zur Login-Seite) */
lbh-block .password-input-wrapper {
position: relative;
display: flex;
align-items: center;
flex-basis: 50%;
flex-grow: 1;
width: 100%;
}
lbh-block .password-input-wrapper input {
width: 100%;
padding-right: 45px;
margin: 0;
}
lbh-block .password-toggle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: auto;
width: 40px;
height: 40px;
min-height: 40px;
max-width: 40px;
background: transparent !important;
border: none !important;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
outline: none;
z-index: 2;
margin: 0;
text-transform: none;
font-size: inherit;
font-weight: normal;
transition: background-color 0.2s;
color: inherit !important;
box-shadow: none !important;
}
lbh-block .password-toggle::after {
display: none !important;
}
lbh-block .password-toggle:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
lbh-block .password-toggle:active {
background-color: rgba(0, 0, 0, 0.1) !important;
}
lbh-block .password-toggle:focus,
lbh-block .password-toggle:focus-visible {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
}
lbh-block .password-toggle-icon {
user-select: none;
pointer-events: none;
width: 24px;
height: 24px;
color: var(--lbh1);
fill: var(--lbh1);
flex-shrink: 0;
vertical-align: middle;
opacity: 0.7;
transition: opacity 0.2s;
}
lbh-block .password-toggle:hover .password-toggle-icon {
opacity: 1;
}
lbh-block .password-toggle-icon-closed {
display: inline-block !important;
}
lbh-block .password-toggle-icon-open {
display: none !important;
}
lbh-block .password-input-wrapper.show-password .password-toggle-icon-closed {
display: none !important;
}
lbh-block .password-input-wrapper.show-password .password-toggle-icon-open {
display: inline-block !important;
}
.px-rundumtermine {
margin: 1.5rem 0;
}
.px-rundumtermine__pagination {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
}
.px-rundumtermine__btn {
border: 1px solid var(--px-lbh-primary, #1d3f72);
background: transparent;
color: var(--px-lbh-primary, #1d3f72);
padding: 0.35rem 0.85rem;
cursor: pointer;
border-radius: 999px;
font-size: 0.9rem;
transition: background 0.2s ease, color 0.2s ease;
}
.px-rundumtermine__btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.px-rundumtermine__btn:not([disabled]):hover {
background: var(--px-lbh-primary, #1d3f72);
color: #fff;
}
.px-rundumtermine__status {
font-weight: 600;
font-size: 0.9rem;
}
.px-rundumtermine__more {
text-align: center;
margin-top: 1.25rem;
}
.px-rundumtermine__more-link {
display: inline-block;
border: 1px solid var(--px-lbh-primary, #1d3f72);
background: transparent;
color: var(--px-lbh-primary, #1d3f72);
padding: 0.5rem 1.25rem;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s ease, color 0.2s ease;
}
.px-rundumtermine__more-link:hover {
background: var(--px-lbh-primary, #1d3f72);
color: #fff;
}
.px-rundumtermine__button-container {
max-width: 300px;
margin: 1.5rem auto 0;
width: 100%;
}
.px-rundumtermine__line {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: baseline;
}
.px-rundumtermine__title {
font-weight: 700;
}
.px-rundumtermine__pipe {
opacity: 0.7;
}
.px-rundumtermine__meta {
font-weight: 600;
}
.px-rundumtermine__desc {
display: block;
margin: 0;
}
.px-rundumtermine__desc p {
margin: 0;
}
.lbh-news--static {
pointer-events: none;
cursor: default;
text-decoration: none;
}
/* Ansprechpartner table */
.px-contact-table-wrapper {
width: 100%;
overflow-x: auto;
margin-top: 2rem;
}
.px-contact-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 600px;
}
.px-contact-table thead th {
background: #f6f7fb;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.05em;
color: #6b6b6b;
padding: 12px;
border-bottom: 2px solid #e2e5ee;
user-select: none;
}
.px-contact-table thead th,
.px-contact-table tbody td,
.px-contact-table tbody tr {
text-align: left;
vertical-align: top !important;
}
.px-contact-table tbody td {
padding: 14px 12px;
border-bottom: 1px solid #eef0f6;
vertical-align: top;
color: var(--lbh1, var(--px-lbh-primary, #1d3f72));
}
.px-contact-table tbody td:nth-child(5),
.px-contact-table tbody td:nth-child(6) {
min-width: 140px;
}
.px-contact-table__info > * {
margin-top: 0;
margin-bottom: 0;
}
.px-contact-table tbody tr:last-child td {
border-bottom: none;
}
.px-contact-table__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 10px;
font-size: 18px;
color: #FFFFFF !important;
height: 40px;
width: 100%;
line-height: 40px;
font-size: 13px;
background: var(--lbh1, var(--px-lbh-primary, #1d3f72));
text-decoration: none;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
border: none;
outline: none;
appearance: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 4px 6px rgba(37, 70, 204, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}
.px-contact-table__btn:hover,
.px-contact-table__btn:focus {
background: var(--lbh2, var(--e-global-color-secondary, #f28c00)) !important;
color: #FFF;
}
.px-contact-table__btn:active {
background: var(--lbh2, var(--e-global-color-secondary, #f28c00)) !important;
transform: translateY(0);
box-shadow: 0 2px 4px rgba(37, 70, 204, 0.2);
}
.px-contact-table__btn i {
font-size: 12px;
color: inherit;
}
.px-sort-asc::after,
.px-sort-desc::after {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-left: 6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.px-sort-asc::after {
border-bottom: 6px solid #6b6b6b;
}
.px-sort-desc::after {
border-top: 6px solid #6b6b6b;
}
.lbh-blockplan {
padding: 12px 16px;
border: 1px solid #d9d9d9;
border-radius: 8px;
background-color: #f7f7f7;
margin-bottom: 16px;
}
.lbh-blockplan h3 {
margin-top: 0;
}
.lbh-divider {
margin: 24px 0;
border: 0;
border-top: 1px solid #d9d9d9;
}
/* Download cards (Blockpläne & Dokumente) */
.lbh-download-section {
margin-bottom: 24px;
}
.lbh-download-hint {
margin: 4px 0 12px;
}
.lbh-download-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 16px 20px;
background: #fff;
margin-bottom: 16px;
max-width: 600px;
width: auto;
display: inline-block;
vertical-align: top;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lbh-download-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
border-color: #d1d5db;
}
.lbh-download-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.lbh-download-badge {
display: inline-block;
background: linear-gradient(135deg, #22307e 0%, #2d3f9e 100%);
color: #fff;
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
margin-right: 8px;
box-shadow: 0 2px 4px rgba(34, 48, 126, 0.2);
transition: all 0.2s ease;
}
.lbh-download-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.lbh-download-list li {
display: flex;
flex-direction: column;
gap: 2px;
}
.lbh-download-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #22307e;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
padding: 4px 0;
border-radius: 4px;
}
.lbh-download-link:hover {
color: #2d3f9e;
text-decoration: none;
transform: translateX(4px);
}
.lbh-download-link i {
font-size: 18px;
transition: transform 0.2s ease;
color: #22307e;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.lbh-download-link:hover i {
transform: scale(1.15) translateY(-1px);
color: #2d3f9e;
}
/* Download-Icon spezifisches Styling */
.lbh-download-link i.bi-file-earmark-arrow-down,
.lbh-download-link i.bi-download,
.lbh-download-link i.bi-file-arrow-down {
background: linear-gradient(135deg, rgba(34, 48, 126, 0.1) 0%, rgba(45, 63, 158, 0.1) 100%);
border-radius: 6px;
padding: 4px;
}
.lbh-download-meta {
color: #6b7280;
font-size: 12px;
margin-top: 4px;
font-weight: 400;
letter-spacing: 0.01em;
}