@font-face {
    font-family: "Comfortaa";
    src: url("fonts/Comfortaa-Regular.ttf");
}

html {
    --lumo-font-family: Comfortaa;
    --lumo-border-radius: 0.75em;
    --lumo-size-xl: 2.5rem;
    --lumo-size-l: 2rem;
    --lumo-size-m: 1.75rem;
    --lumo-size-s: 1.5rem;
    --lumo-size-xs: 1.25rem;
    --lumo-space-xl: 1.75rem;
    --lumo-space-l: 1.125rem;
    --lumo-space-m: 0.5rem;
    --lumo-space-s: 0.25rem;
    --lumo-space-xs: 0.125rem;
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
    --lumo-line-height-m: 1.4;
    --lumo-line-height-s: 1.2;
    --lumo-line-height-xs: 1.1;

    --lumo-primary-text-color: rgb(55, 97, 134);
    --lumo-primary-color-50pct: rgba(85, 139, 185, 0.5);
    --lumo-primary-color-30pct: rgba(85, 139, 185, 0.3);
    --lumo-primary-color-10pct: rgba(85, 139, 185, 0.1);
    --lumo-primary-color: rgb(55, 97, 134);
    --lumo-error-text-color: rgb(159, 65, 65);
    --lumo-error-color-50pct: rgba(159, 65, 65, 0.5);
    --lumo-error-color-10pct: rgba(159, 65, 65, 0.1);
    --lumo-error-color: rgb(159, 65, 65);
    --lumo-success-color: rgb(92, 159, 65);
    --lumo-base-color: white;

    /*
    --lumo-shade-10pct: Das nutzt Vaddin als Hintergrund von Eingabefeldern
    */
    --vaadin-input-field-border-width: 1px;
    --vaadin-input-field-border-color: var(--lumo-primary-text-color);
    --vaadin-input-field-value-font-weight: 800;
    --vaadin-input-field-value-font-size: var(--lumo-font-size-m);

    /* Deaktivieren von Pull-To-Refresh auf mobilen Geräten (Neuladen beim nach unten ziehen) */
    overscroll-behavior: none;
}

[theme~="dark"] {
    --lumo-base-color: #1c3c57;
}

vaadin-menu-bar-submenu::part(overlay) {
    background: rgb(100, 148, 190);
    color: white;
}

vaadin-menu-bar-overlay::part(overlay) {
    color: white;
    background: rgb(100, 148, 190);
    background: -moz-linear-gradient(180deg, rgba(100, 148, 190, 1) 0%,
    rgba(133, 191, 240, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(100, 148, 190, 1) 0%,
    rgba(133, 191, 240, 1) 100%);
    background: linear-gradient(180deg, rgba(100, 148, 190, 1) 0%,
    rgba(133, 191, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6494be",
    endColorstr="#85bff0", GradientType=1);
}

/* Anpassungen für iPads (max-width 1024px) */
@media screen and (max-width: 1366px) {
    html {
        --lumo-font-size: 0.875rem !important;
        --lumo-font-size-xxxl: 1.5rem !important;
        --lumo-font-size-xxl: 1.25rem !important;
        --lumo-font-size-xl: 1rem !important;
        --lumo-font-size-l: 0.875rem !important;
        --lumo-font-size-m: 0.75rem !important;
        --lumo-font-size-s: 0.6875rem !important;
        --lumo-font-size-xs: 0.625rem !important;
        --lumo-font-size-xxs: 0.5625rem !important;
        --lumo-line-height-m: 1.3 !important;
        --lumo-line-height-s: 1.15 !important;
        --lumo-line-height-xs: 1.05 !important;
        --lumo-border-radius: 0.5em !important;
        --lumo-space-xl: 1.5rem !important;
        --lumo-space-l: 1rem !important;
        --lumo-space-m: 0.75rem !important;
        --lumo-space-s: 0.5rem !important;
        --lumo-space-xs: 0.25rem !important;
    }
}

/* Anpassungen für iPhones (max-width 768px) */
/*
@media screen and (max-width: 768px) {
  kml {
    --lumo-font-size: 0.75rem !important;
    --lumo-font-size-xxxl: 1.25rem !important;
    --lumo-font-size-xxl: 1rem !important;
    --lumo-font-size-xl: 0.875rem !important;
    --lumo-font-size-l: 0.75rem !important;
    --lumo-font-size-m: 0.625rem !important;
    --lumo-font-size-s: 0.5625rem !important;
    --lumo-font-size-xs: 0.5rem !important;
    --lumo-font-size-xxs: 0.4375rem !important;

    --lumo-line-height-m: 1.2 !important;
    --lumo-line-height-s: 1.1 !important;
    --lumo-line-height-xs: 1 !important;

    --lumo-border-radius: 0.25em !important;
    --lumo-space-xl: 1.25rem !important;
    --lumo-space-l: 0.875rem !important;
    --lumo-space-m: 0.5rem !important;
    --lumo-space-s: 0.25rem !important;
    --lumo-space-xs: 0.125rem !important;
  }
}
*/
vaadin-grid-sorter::part(indicators) {
    font-size: 20px; /* Größe der Pfeile anpassen */
    padding-right: 14px;
    /* Etwas Abstand damit die Pfeile auch noch geklickt werden können, wenn die Spalte stark zusammengeschoben. */
}

/******* Responsive Images *******/
/* Hochformat (Portrait) */
@media screen and (orientation: portrait) {
    .responsive-image {
        width: 100%;
        height: auto;
        max-height: 100vh; /* verhindert Überdehnung nach unten */
        object-fit: contain; /* sorgt dafür, dass Seitenverhältnis erhalten bleibt */
        display: block; /* entfernt evtl. unerwünschte whitespace-lücke */
    }
}

/* Querformat (Landscape) */
@media screen and (orientation: landscape) {
    .responsive-image {
        height: 100%;
        width: auto;
        max-width: 100vw;
        object-fit: contain;
        display: block;
    }
}


.select-button {
    text-align: center;
    background-color: var(--lumo-shade-10pct);
    border-radius: 6px;
    width: 100%;
    padding: 1px;
    margin: 1px;
    user-select: none;
    border: 1px solid var(--lumo-primary-text-color);
}

.select-button-active {
    color: white;
    background-color: var(--lumo-primary-text-color);
    text-align: center;
    border-radius: 6px;
    width: 100%;
    padding: 1px;
    margin: 1px;
    user-select: none;
    border: 1px solid var(--lumo-shade-10pct);
    font-weight: bold;
    font-size: var(--lumo-font-size-l);
}

.baumnummer {
    font-weight: bold;
}

.checkbox {
    font-size: var(--lumo-font-size-m);
}

.select {
    font-size: var(--lumo-font-size-m);
}

.label-poweredby {
    margin-top: 20px;
    font-size: var(--lumo-font-size-xs);
}

.label-helpertext {
    font-style: italic;
    color: var(--lumo-primary-text-color);
}

.chart {
    font-family: var(--lumo-font-family);
}

.login-information {
    flex: 0;
}

.baumerfassung-submain {
    padding-left: 15px;
    padding-right: 5px;
}

.overflow-scroll {
    overflow: scroll;
}

/****** MAIL ******/
.mail-html-content {
    border: 0px;
    border-top: 1px;
    border-style: solid;
    padding-top: 20px;
    border-color: var(--lumo-primary-text-color);
}

/****** MENU ******/
.menu-top {
    background: rgb(100, 148, 190);
    background: -moz-linear-gradient(180deg, rgba(100, 148, 190, 1) 0%,
    rgba(133, 191, 240, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(100, 148, 190, 1) 0%,
    rgba(133, 191, 240, 1) 100%);
    background: linear-gradient(180deg, rgba(100, 148, 190, 1) 0%,
    rgba(133, 191, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6494be",
    endColorstr="#85bff0", GradientType=1);
    padding-right: 10px;
}

.menu-bar {
    /* auto erzeugt am Ende des Menüs drei Punkte... falls die Breite nicht reicht */
    overflow: auto;
}

.menu-item {
    /*** Im Quellcode ***/

}

.menu-item-icon {
    color: white;
}

.menu-item-content {
    padding: 30px;
    background-color: white;
}

.menu-item-label {
    color: white;
}

.header-label {
    font-size: var(--lumo-font-size-xl);
    font-weight: bold;
    color: #610b4f;
    margin-bottom: 15px;
}

.header-label-without-bottom-margin {
    font-size: var(--lumo-font-size-xl);
    font-weight: bold;
    color: #610b4f;
}

.label-bold {
    font-weight: bold;
}

.label-font-s {
    font-size: var(--lumo-font-size-s);
}

.menu-entry {
    padding-bottom: 30px;
}

.menu-entry-text {
    font-variant: small-caps;
    font-weight: bold;
}

.menu-entry-description {
    font-style: italic;
    font-size: var(--lumo-font-size-s);
}

.datenbank-label {
    color: white;
    font-size: var(--lumo-font-size-s);
}

/***** END MENUE ******/

/****** TICKETS ******/
.red_ticket {
    backface-visibility: hidden;
    transform: rotate(-0deg) translateY(0%) translateZ(0);
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    display: inline-block;
    padding: 15px 25px;
    margin-bottom: 20px;
    margin-top: 10px;
    background-image: radial-gradient(ellipse closest-side at 50% 50%, hsla(0, 0%, 100%, 0.10),
    transparent 90%),
    radial-gradient(circle at 0 100%, transparent 14px, #953939 15px),
    radial-gradient(circle at 100% 100%, transparent 14px, #953939 15px),
    radial-gradient(circle at 100% 0, transparent 14px, #953939 15px),
    radial-gradient(circle at 0 0, transparent 14px, #953939 15px);
    background-position: center center, bottom left, bottom right, top right,
    top left;
    background-size: cover, 51% 51%, 51% 51%, 51% 51%, 51% 51%;
    background-repeat: no-repeat;
    border-width: 0 4px;
    border-color: transparent;
    border-style: solid;
    border-image: radial-gradient(cover circle, #953939 0%, #953939 50%, transparent 51%) 0 39%/15px 4px repeat;
    -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 1px 1px 2px);
    color: white;
}

.red_ticket > div {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    position: relative;
    border-color: #742f2f;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    text-align: center;
    font: 1.5em/1 Comfortaa;
    text-transform: none;
    line-height: 1.5;
}

.green_ticket {
    backface-visibility: hidden;
    transform: rotate(-0deg) translateY(0%) translateZ(0);
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    display: inline-block;
    padding: 15px 25px;
    margin-bottom: 20px;
    margin-top: 10px;
    background-image: radial-gradient(ellipse closest-side at 50% 50%, hsla(0, 0%, 100%, 0.10),
    transparent 90%),
    radial-gradient(circle at 0 100%, transparent 14px, #529539 15px),
    radial-gradient(circle at 100% 100%, transparent 14px, #529539 15px),
    radial-gradient(circle at 100% 0, transparent 14px, #529539 15px),
    radial-gradient(circle at 0 0, transparent 14px, #529539 15px);
    background-position: center center, bottom left, bottom right, top right,
    top left;
    background-size: cover, 51% 51%, 51% 51%, 51% 51%, 51% 51%;
    background-repeat: no-repeat;
    border-width: 0 4px;
    border-color: transparent;
    border-style: solid;
    border-image: radial-gradient(cover circle, #529539 0%, #529539 50%, transparent 51%) 0 39%/15px 4px repeat;
    -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 1px 1px 2px);
    color: white;
}

.green_ticket > div {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    position: relative;
    border-color: #3a672a;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    text-align: center;
    font: 1.5em/1 Comfortaa;
    text-transform: none;
    line-height: 1.5;
}

.orange_ticket {
    backface-visibility: hidden;
    transform: rotate(-0deg) translateY(0%) translateZ(0);
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    display: inline-block;
    padding: 15px 25px;
    margin-bottom: 20px;
    margin-top: 10px;
    background-image: radial-gradient(ellipse closest-side at 50% 50%, hsla(0, 0%, 100%, 0.10),
    transparent 90%),
    radial-gradient(circle at 0 100%, transparent 14px, #949539 15px),
    radial-gradient(circle at 100% 100%, transparent 14px, #949539 15px),
    radial-gradient(circle at 100% 0, transparent 14px, #949539 15px),
    radial-gradient(circle at 0 0, transparent 14px, #949539 15px);
    background-position: center center, bottom left, bottom right, top right,
    top left;
    background-size: cover, 51% 51%, 51% 51%, 51% 51%, 51% 51%;
    background-repeat: no-repeat;
    border-width: 0 4px;
    border-color: transparent;
    border-style: solid;
    border-image: radial-gradient(cover circle, #949539 0%, #949539 50%, transparent 51%) 0 39%/15px 4px repeat;
    -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 1px 1px 2px);
    color: white;
}

.orange_ticket > div {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    position: relative;
    border-color: #858627;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    text-align: center;
    font: 1.5em/1 Comfortaa;
    text-transform: none;
    line-height: 1.5;
}

.white_ticket {
    backface-visibility: hidden;
    transform: rotate(-0deg) translateY(0%) translateZ(0);
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    display: inline-block;
    padding: 15px 25px;
    margin-bottom: 20px;
    margin-top: 10px;
    background-image: radial-gradient(ellipse closest-side at 50% 50%, hsla(0, 0%, 100%, 0.10),
    transparent 90%),
    radial-gradient(circle at 0 100%, transparent 14px, #FFFFFF 15px),
    radial-gradient(circle at 100% 100%, transparent 14px, #FFFFFF 15px),
    radial-gradient(circle at 100% 0, transparent 14px, #FFFFFF 15px),
    radial-gradient(circle at 0 0, transparent 14px, #FFFFFF 15px);
    background-position: center center, bottom left, bottom right, top right,
    top left;
    background-size: cover, 51% 51%, 51% 51%, 51% 51%, 51% 51%;
    background-repeat: no-repeat;
    border-width: 0 4px;
    border-color: transparent;
    border-style: solid;
    border-image: radial-gradient(cover circle, #949539 0%, #949539 50%, transparent 51%) 0 39%/15px 4px repeat;
    -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 1px 1px 2px);
    color: white;
}

.white_ticket > div {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    position: relative;
    border-color: #858627;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    text-align: center;
    font: 1.5em/1 Comfortaa;
    text-transform: none;
    line-height: 1.5;
}

.ticket_component {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}

.green_ticket_OLD {
    background-color: var(--lumo-success-color);
    color: white;
    display: inline-block;
    text-align: center;
    -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 10px,
    black 11px);
    padding: 10px;
}

.red_ticket_OLD {
    background-color: var(--lumo-error-color);
    color: white;
    display: inline-block;
    text-align: center;
    -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 10px,
    black 11px);
    padding: 10px;
}

.ticket-url {
    color: var(--lumo-success-color);
    vertical-align: center;
}

.ticket-wrapper {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-radius: 20px;
    box-shadow: 10px 5px 5px lightgrey;
    background-color: #c3cdd5;
}

.ticket-image {
    border-radius: 12px;
    width: 100%;
}

.ticket-image:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/****** ENDE TICKETS ******/

/***** HILFE *****/
.tour-mainlayout {
    background-color: white;
    border-color: #253345;
    border: 1px;
    border-style: solid;
    color: #253345;
    padding: 0px;
    margin: 0px;
}

.tour-headline {
    color: white;
    background-color: #253345;
    font-weight: bold;
    font-variant: small-caps;
    font-size: var(--lumo-font-size-l);
    padding: 10px;
}

.tour-timelinelayout {
    padding-top: 0px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.tour-buttonlayout {
    padding-left: 15px;
    padding-right: 15px;
}

.tour-contentlayout {
    font-size: var(--lumo-font-size-s);
    padding: 15px;
    overflow: auto;
    background-color: white;
}

.tour-image-icon-description {
    background-color: #EEEEEE;
    padding: 5px;
}

.tour-label {
    padding: 0px;
    margin: 0px;
}

/****** ENDE HILFE *******/

/**** WETTER ******/
.weather-day {
    font-size: 5.5rem;
}

.weather-day-today {
    font-size: 5.5rem;
    color: var(--lumo-error-color);
}

.weather-dayofweek {
    font-size: 1.2rem;
}

.weather-dayofweek-today {
    font-size: 1.2rem;
    color: var(--lumo-error-color);
}

.weather-month {
    font-size: 1.2rem;
}

.weather-month-today {
    font-size: 1.2rem;
    color: var(--lumo-error-color);
}

.weather-hour {
    font-size: 1.2rem;
}

.weather-city {
    font-size: 2.5rem;
}

.weather-temperatur {
    font-weight: bold;
}

.weather-day-layout {
    background-color: #f3f3f3;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #bebebe;
}

.weather-sommerist {
    font-size: 1rem;
    font-variant: small-caps;
    color: #610b4f;
}

/**** ENDE WETTER ******/
.copyright {
    text-align: center;
    font-size: var(--lumo-font-size-xs);
}

.test {
    background-color: red;
    border: 2px;
    border-style: solid;
}

.test2 {
    background-color: green;
    border: 2px;
}

.EEEEEE {
    background-color: #eeeeee;
}

.DDDDDD {
    background-color: #dddddd;
}

.locationAccordionWrapper {
    margin-left: 15px;
    margin-bottom: 15px;
}

.routerlink {
    color: rgb(17, 34, 49);
    font-variant: small-caps;
    font-size: var(--lumo-font-size-l);
}

.routerlink:hover {
    color: #610b4f;
    text-decoration: none;
}

.ticket-login-label {
    color: var(--lumo-error-color);
    font-weight: bold;
    font-size: var(--lumo-font-size-xxxl);
}

.login-screen-desktop {
    background-image: url("img/spring.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.login-screen-mobile {
    background-color: white;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.login-screen-desktop-testsystem {
    background-image: url("img/stamm.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.login-screen-mobile-testsystem {
    background-color: white;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.login-layout {
    background-color: white;
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 500px;
    border-radius: 10px;
}

.logo {
    text-align: center;
}

.small-logo {
    margin-left: 1vw;
    margin-top: 10px;
}

.sprichwort {
    font-style: italic;
    font-variant: small-caps;
    color: #610b4f;
    text-align: justify;
    font-size: var(--lumo-font-size-l);
}

.autor {
    font-variant: small-caps;
    color: #610b4f;
    text-align: center;
    font-size: var(--lumo-font-size-l);
}

.sprichwort-login {
    font-style: italic;
    color: #610b4f;
    font-variant: small-caps;
    text-align: justify;
    font-size: var(--lumo-font-size-l);
    padding-left: 20px;
    padding-right: 20px;
}

.autor-login {
    color: #610b4f;
    font-variant: small-caps;
    font-size: var(--lumo-font-size-l);
}

.danke {
    font-weight: bold;
    color: #608235;
    font-variant: small-caps;
    font-size: var(--lumo-font-size-xl);
    white-space: nowrap;
}

.v-dragged.card {
    outline: 1px dotted hotpink;
    opacity: 0.5;
}

.about-view {
    text-align: justify;
    background-image: url("img/bridge.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 200px;
}

.about-view h1 {
    color: white;
    font-variant: small-caps;
}

.about-view-layout-ents {
    text-align: justify;
    color: white;
    background-color: black;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.0);
}

.about-view-layout-person {
    color: white;
    background-color: black;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.0);
}

.about-view-layout-person h3 {
    color: white;
}

.about-view-layout-person h4 {
    color: white;
}

#map {
    height: 100%;
    background-color: red;
}

.crud-form {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow: auto;
    background: var(--lumo-base-color);
    box-shadow: var(--overlay-box-shadow);
}

.crud-form-content {
    margin-top: var(--_vaadin-app-layout-navbar-offset-size);
}

/***********  SchadenView *********/
.schaden-view {
    background-color: #a1c4fd;
    width: 100%;
    height: 100%;
    background-image: url("img/Laubbaum.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.schaden-div {
    background-color: var(--lumo-error-color);
    position: absolute;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 20px) 100%);
    border: 1px solid white;
    border-radius: 3px;
    border-style: solid;
    padding-left: 20px;
    height: auto;
    opacity: 0.85;
    user-select: none;
    -webkit-user-select: none; /* iOS Safari */
    -ms-user-select: none; /* IE/Edge */
    z-index: 1;
    cursor: grab;
    min-width: 60px;
}

.schaden-view-new {
    background-color: #a1c4fd;
    width: 100%;
    height: 100%;
}

.schaden-icon {
    background-color: var(--lumo-error-color);
    width: 20px;
    height: 20px;
    border: 1px solid;
    border-color: white;
    /* Muss absolute bleiben für korrekte Darstellung Mobil und Desktop */
    position: absolute;
    border-radius: 50%;
    /* Muss 1000 bleiben damit Icons oben liegen und anklickbar sind. */
    z-index: 1000;
}

.hoehe-label {
    position: absolute;
    padding-left: 10px;
    color: white;
    font-size: var(--lumo-font-size-s);
    user-select: none;
}

.laubbaum-container {
    width: 100%;
    padding-top: 119.38%;
    position: relative;
}

.schaden-label {
    color: white;
    font-size: var(--lumo-font-size-m);
    padding: 5px;
    user-select: none;
    vertical-align: bottom;
    white-space: nowrap;
}

.schaden-label-bold {
    color: white;
    font-size: var(--lumo-font-size-l);
    padding: 5px;
    font-weight: bold;
    user-select: none;
    vertical-align: bottom;
    white-space: nowrap;
}

/*****************************/

/************* Maßnahmen ************/
.massnahme-offen {
    font-weight: bolder;
}

.massnahme-erledigt {
    text-decoration: line-through;
}

.massnahme-verworfen {
    text-decoration: line-through;
    color: grey;
}

/************************************/
.report-form {
    overflow: scroll;
}

/*
 * Special rules for narrow screens (responsive design rules)
 */
@media ( max-width: 800px) , ( max-height: 600px) {
    /*
     * Make menu toggle visible, and smaller
     */
    .menu-toggle {
        display: block;
        height: var(--lumo-button-size);
        width: var(--lumo-button-size);
    }

    .menu-header {
        padding-left: 0;
    }
}

@media ( max-width: 550px) {
    .product-form {
        width: 100%;
        /* Prevent text-fields from overflowing on narrow screens */
        --vaadin-text-field-default-width: 6em;
    }
}

/* Color codes for the availability statuses of the products */
.green {
    color: var(--lumo-success-color);
}

.yellow {
    color: #c2b147;
}

.orange {
    color: #c28747;
}

.red {
    color: var(--lumo-error-color);
}

/*
.v-loading-indicator.first { background-color: #d2539f !important ; }

.v-loading-indicator.second:before { background-color: #d2539f !important; }

.v-loading-indicator.third:before { background-color: #d2539f !important; }

.v-loading-indicator:before { background-color: #d2539f !important; }

.v-loading-indicator[style*="none"]{background-color: #d2539f !important;}
*/
.v-loading-indicator {
    /* background: rgb(172,41,119) !important; */
    background: -moz-linear-gradient(90deg, rgba(172, 41, 119, 1) 0%,
    rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(172, 41, 119, 1) 0%,
    rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(90deg, rgba(172, 41, 119, 1) 0%,
    rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ac2977",
    endColorstr="#ffffff", GradientType=1);
}

.baum-statusbar {
    background-color: var(--lumo-primary-color-30pct);
    margin: 0px;
    padding-left: 20px;
}

.baum-statusbar-element {
    padding-right: 20px;
    font-variant: small-caps;
    font-size: var(--lumo-font-size-xs);
    user-select: none;
    cursor: pointer;
}

.text-area {

}

.marker-label {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 3px;
    border-radius: 3px;
    transform: translate(-50%, -150%);
    /* Positioniert das Label über dem Marker */
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    pointer-events: none;
    /* Macht das Label nicht klickbar, um den Marker anzuklicken */
}