@font-face {
    font-display: swap;
    font-family: "Open Sans";
    src: url("fonts/OpenSans/OpenSans-Regular.ttf");
}

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

:root {
    --frontend-control-radius: 8px;
    --frontend-on-primary: #fff;
    --frontend-panel-radius: 12px;
    --frontend-section-gap: 1rem;
    --frontend-panel-shadow: 0 8px 24px #00000012;
    --frontend-page: color-mix(in srgb, var(--color-surface-alt, #efefef) 32%, var(--color-white, #fff));
    --frontend-text: #171717;
}

:root[data-frontend-theme="night"] {
    color-scheme: dark;
    --color-border: #475569;
    --color-divider: #64748b;
    --color-surface-alt: #1f2937;
    --color-text-muted: #aeb8c6;
    --color-white: #111827;
    --frontend-page: #0b1120;
    --frontend-panel-shadow: 0 10px 28px #00000052;
    --frontend-text: #e5e7eb;
}

* {
    color: inherit;
    font-family: var(--font-ui, "Open Sans"), Arial, sans-serif;
}

body.isfrontend {
    background: var(--frontend-page);
    color: var(--frontend-text);
    font-size: 1rem;
    line-height: 1.5;
}

.row {
    max-width: 1500px;
}

h1,
h2,
h3,
h4,
h5,
h5 a,
.large {
    font-family: var(--font-ui, "Open Sans"), Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

button,
input,
select {
    font-family: var(--font-ui, "Open Sans"), Arial, sans-serif;
}

a.bookytlogo img {
    max-width: 80px;
}

fieldset a {
    text-decoration: underline;
}

fieldset a:hover {
    text-decoration: none;
}

.full-width {
    width: 100%;
}

.app-icon {
    display: inline-block;
    line-height: 1;
    text-align: center;
    width: 1.25em;
}

.app-icon-large {
    font-size: 1.1rem;
}

table thead,
table tbody,
table tbody tr:nth-child(even),
table tbody tr:nth-child(odd) {
    background: unset;
    border: 0;
    color: unset;
}

b,
strong,
.strong {
    font-weight: bold;
}

.no-js {
    display: none;
}

.ui-widget-overlay {
    opacity: 0.95;
}

.logout_link {
    display: block;
}

body.testmodus {
    background-color: lightpink;
}

.dialog-auto {
    bottom: 0;
    left: 0;
    position: fixed;
}

body.noscroll {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
}

#containerDigialerBeleg {
    margin: 30px auto 0;
    max-width: 600px;
}

#tabs-3 .row,
.maxWidthContainer {
    margin: auto;
    max-width: 600px;
}

#tabs-3 .row .zusammenfassung {
    padding: 0;
}

#tabs img.logo,
img.buchungsbestaetigunglogo {
    max-height: 55px;
    max-width: 120px;
    min-height: 30px;
    padding: 0;
    vertical-align: middle;
}

/* Tabs style entfernen */
#tabs ul#tabbarheader {
    height: 60px;
    line-height: 60px; /* equal to height of container */
}

#tabs ul#tabbarheader.frontend-status-callout {
    align-items: center;
    display: flex;
    line-height: normal;
    margin-bottom: 0;
    padding: 0.875rem 1.25rem;
}

@media only screen and (min-width: 641px) {
    #tabs ul#tabbarheader.frontend-status-callout {
        margin-left: 0;
        width: 100%;
    }
}

div.rowsuchfilter,
div.divtabbareleemnt,
div.div_auswahl_anzahl {
    margin-top: 35px;
}

@media only screen and (max-width: 640px) {
    #tabs ul#tabbarheader {
        display: flex;
        justify-content: space-between;
    }

    .cellfahrzeugnebeneinander {
        padding-right: 0;
    }

    #fahrzeugliste .ui-tabs .ui-tabs-panel {
        padding-left: 0;
        padding-right: 0;
    }

    ul.fahrzeugkategorien > li,
    ul.fahrzeugkategorien > li a {
        text-align: center;
        width: 100%;
    }

    .row .row {
        margin-right: 0;
    }

    div.rowsuchfilter {
        margin-top: 0;
    }
}

.row:not(.expanded) .row.rowsuchfilter,
div.row.rowsuchfilter {
    max-width: 900px;
}

.row:not(.expanded) .row.frontend-filter-callout,
.row:not(.expanded) .row.frontend-info-callout,
.row:not(.expanded) .row.frontend-station-callout,
div.row.frontend-filter-callout,
div.row.frontend-info-callout,
div.row.frontend-station-callout {
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--frontend-section-gap);
    max-width: none;
    width: 100%;
}

.frontend-filter-callout {
    margin-top: 0;
}

.frontend-info-callout .frontend-station-info {
    border-bottom: 1px solid var(--color-surface-alt);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
}

.frontend-station-callout {
    padding: 1rem;
}

.frontend-station-info {
    padding: 0;
}

#tabs > .frontend-selection-step,
#tabs > .frontend-step-callout {
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--frontend-section-gap);
    width: 100%;
}

#tabs > .frontend-selection-step {
    padding: 0;
}

#tabs > .frontend-step-callout {
    padding: 1.25rem;
}

#tabs-3.frontend-checkout-callout {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
    padding: 1.25rem;
}

.beschriftungheadline {
    padding-top: 1em;
}

.ui-tabs .ui-tabs-panel {
    padding-right: 0.1rem;
}

#tabs > .frontend-selection-step.ui-tabs-panel,
#tabs > .frontend-step-callout.ui-tabs-panel {
    padding-left: 0;
    padding-right: 0;
}

#tabs > .frontend-step-callout.ui-tabs-panel {
    padding: 1.25rem;
}

div.fahrzeug_selector_buttonfeld .buchen_button {
    width: 100%;
}

#tabs ul li a span {
    display: contents;
}

.ui-widget.ui-widget-content {
    border: 0;
}

.ui-widget-header {
    background: unset;
    border: 0;
    color: unset;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-tabs {
    background: unset;
    border: 0;
}

#tabs .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: unset;
    border: 0;
    font-weight: normal;
}

.ui-tabs-nav.ui-state-default {
    color: var(--color-divider);
}

.DivAccordionClosed h3 {
    color: black;
}

.ui-dialog {
    background: var(--color-white);
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0;
}

#tabbarheader li a {
    display: contents;
}

.ui-tabs .aufzaehlung {
    background: var(--color-divider);
    border: 0;
    border-radius: 50%;
    color: var(--frontend-on-primary, #fff);
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    width: 30px;
}

.ui-tabs-active .aufzaehlung {
    background: var(--color-primary);
    color: var(--frontend-on-primary, #fff);
}

.ui-tabs .beschriftung {
    color: var(--color-divider);
}

.ui-tabs-active .beschriftung {
    color: var(--color-primary);
}

#tabbarheader > li {
    margin-right: 15px;
}

#tabbarheader > li:last-child {
    margin-right: 0;
}

table.datum_table,
table.datum_table tbody {
    border: 0;
    margin: 0;
    padding: 0;
    width: auto;
}

table.datum_table tr {
    background-color: transparent !important;
}

table.datum_table tr td {
    border: 0;
    margin: 0;
    padding: 0;
}

table.datum_table tr td:first-child {
    padding-right: 1em;
}

table.datum_table tr.alternativ_head {
    border-bottom: 1px solid var(--color-border);
}

.table_calendar {
    margin: -2px 0 0;
    padding: 0;
    white-space: nowrap;
}

.table_calendar img {
    padding-left: 2px;
    padding-right: 2px;
}

input,
select {
    border-radius: var(--frontend-control-radius) !important;
}

.table_calendar input[type="text"] {
    display: inline;
}

input.textbox_datum[readonly] {
    background-color: unset;
    cursor: default;
}

.table_calendar input[type="date"],
.table_calendar input[type="time"] {
    display: inline-block;
}

.ui-datepicker-trigger i {
    font-size: 2em;
    margin: 0 5px 0 8px;
    vertical-align: middle;
}

.table_calendar input.textbox_zeitv3 {
    width: 60px;
}

.table_calendar select.uhrzeit {
    width: 80px;
}

.table_calendar input[type="date"],
.table_calendar input.textbox_datum {
    width: 120px;
}

.table_calendar input::-webkit-clear-button {
    -webkit-appearance: none; /* turn off default browser styling */
    display: none; /* Hide the button */
}

.IconEdit,
.ui-datepicker-trigger {
    border: 0;
    cursor: pointer;
    height: 1.8em;
    min-width: 1.8em;
}

table.ui-datepicker-calendar tbody tr td a.ui-state-default {
    color: black;
}

table.ui-datepicker-calendar tbody tr td a.ui-state-hover,
table.ui-datepicker-calendar tbody tr td.ui-datepicker-current-day a {
    background: var(--color-primary);
    color: var(--frontend-on-primary, #fff);
}

table.ui-datepicker-calendar tbody tr td.ui-state-disabled a {
    color: var(--color-divider);
}

.ui-datepicker-header {
    background: var(--color-primary);
}

.ui-datepicker-header span {
    color: var(--frontend-on-primary, #fff);
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    background-image: none !important;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    margin-top: 1px;
}

.ui-datepicker-prev.ui-state-disabled {
    display: none;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
    align-items: center;
    bottom: 0;
    color: var(--frontend-on-primary, #fff);
    display: flex;
    font-weight: bold;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.ui-datepicker .ui-icon {
    display: none;
}

.ui-datepicker-prev:before {
    content: "<";
}

.ui-datepicker-next:before {
    content: ">";
}

.ui-datepicker .ui-state-hover {
    background: var(--color-white);
}

.ui-datepicker .ui-state-hover.ui-datepicker-prev:before,
.ui-datepicker .ui-state-hover.ui-datepicker-next:before {
    color: var(--color-primary);
}

button.ui-datepicker-current,
button.ui-datepicker-close {
    background: var(--color-primary);
    color: var(--frontend-on-primary, #fff);
}

.ui-datepicker-buttonpane button {
    color: black !important;
}

#fahrzeugliste .ui-tabs .ui-tabs-panel,
#tabs div.artikelextratabs .ui-tabs .ui-tabs-panel {
    padding-left: 0.5em;
    padding-top: 0;
}

#fahrzeugliste div.divTab ul li.ui-tabs-tab,
#tabs div.artikelextratabs li.ui-tabs-tab {
    background-color: var(--color-surface-alt);
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
}

#fahrzeugliste div.divTab ul li.ui-tabs-tab {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

#fahrzeugliste div.divTab ul li.ui-tabs-tab a,
#tabs div.artikelextratabs li.ui-tabs-tab a {
    color: var(--color-text-muted);
}

#fahrzeugliste div.divTab ul li.ui-tabs-tab a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#fahrzeugliste div.divTab ul li.ui-tabs-tab.ui-state-active,
#tabs div.artikelextratabs li.ui-state-active {
    background: var(--color-primary);
}

#fahrzeugliste div.divTab ul li.ui-tabs-tab.ui-state-active a,
#tabs div.artikelextratabs li.ui-state-active a {
    color: var(--frontend-on-primary, #fff);
}

#fahrzeugliste div.divTab .columns,
#tabs div.artikelextratabs .columns {
    padding-left: 0.35rem;
}

#fahrzeugliste div.divTab .fahrzeug_selector_buttonfeld .columns {
    padding-left: 0;
    padding-right: 0;
}

#fahrzeugliste div.divTab,
#fahrzeugliste div.divTab ul {
    padding-left: 0;
}

#fahrzeugliste div.divTab .cellfahrzeugnebeneinander {
    margin-bottom: 15px;
    padding-left: 0;
}

#tabs div.artikelextratabs div.artikelauswahl .row {
    padding-bottom: 10px;
}

h3.mietartikelkategorie {
    margin-top: 20px;
}

img.fahrzeug_logo {
    height: 1.2rem;
    margin: 0.1rem;
    margin-right: 9px;
    margin-top: 5px;
}

.ui-accordion-content {
    background: transparent;
    border: 0;
    color: black;
}


.buchungsbestaetigung .DivAccMehrDetails,
#contentbereich .DivAccMehrDetails {
    margin-top: 25px;
}

.buchungsbestaetigungrow {
    margin-top: 30px;
}

.DivAccMehrDetails h3 span.ui-accordion-header-icon {
    float: right;
}

.DivAccMehrDetails h3 {
    color: black !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    padding: 0 !important;
}

.DivAccMehrDetails h3.ui-accordion-header-collapsed {
    border-bottom: 1px solid black !important;
}

.DivAccMehrDetails .ui-accordion-content {
    border: 0;
    padding: 0;
}

.DivAccMehrDetails {
    margin-bottom: 20px;
}

.durchstrich {
    text-decoration: line-through;
}

.button.success,
.button.success:hover,
.button.success:focus,
.button.success *,
.button,
button.success,
button.success:hover,
button.success:focus {
    background: var(--color-primary);
    border-radius: var(--frontend-control-radius);
    color: var(--frontend-on-primary, #fff) !important;
}

.button.hollow {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--frontend-control-radius);
    color: var(--color-primary) !important;
}

#login_dialog div.buttonlogin .button {
    width: 100%;
}

/* Kundenlogin als regulaerer Seiteninhalt statt als erzwungener Dialog. */
.frontend-customer-login-page {
    margin: 0 auto var(--frontend-section-gap);
    max-width: 75rem;
    width: 100%;
}

.frontend-booking-code-page {
    margin: 0 auto var(--frontend-section-gap);
    max-width: 56rem;
    width: 100%;
}

.frontend-customer-login-callout {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.frontend-booking-code-callout {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.frontend-customer-login-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-divider, #ddd);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.frontend-booking-code-header {
    align-items: center;
    border-bottom: 1px solid var(--color-divider, #ddd);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.frontend-customer-login-header__icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 12%, var(--color-white, #fff));
    border-radius: 50%;
    color: var(--color-primary, #1779ba);
    display: inline-flex;
    flex: 0 0 3.25rem;
    font-size: 1.35rem;
    height: 3.25rem;
    justify-content: center;
}

.frontend-booking-code-header__icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 12%, var(--color-white, #fff));
    border-radius: 50%;
    color: var(--color-primary, #1779ba);
    display: inline-flex;
    flex: 0 0 3.25rem;
    font-size: 1.35rem;
    height: 3.25rem;
    justify-content: center;
}

.frontend-customer-login-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.frontend-booking-code-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.frontend-booking-code-notice {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 8%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1779ba) 28%, var(--color-border, #cacaca));
    border-radius: var(--frontend-control-radius, 8px);
    color: var(--color-text, #222);
    display: flex;
    gap: 0.75rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.frontend-booking-code-notice > .fa-solid {
    color: var(--color-primary, #1779ba);
    flex: 0 0 auto;
    line-height: 1.5;
}

.frontend-booking-code-notice p:first-child {
    margin-top: 0;
}

.frontend-booking-code-notice p:last-child,
.frontend-booking-code-notice ul:last-child {
    margin-bottom: 0;
}

.frontend-booking-code-entry {
    background: var(--color-surface-alt, #f7f7f7);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.frontend-booking-code-entry label {
    color: var(--color-text, #222);
    font-weight: 600;
    grid-column: 1 / -1;
}

.frontend-booking-code-entry input[type="text"] {
    background: var(--color-white, #fff);
    margin: 0;
}

.frontend-booking-code-entry .button {
    margin: 0;
    min-width: 5rem;
}

.frontend-customer-login-header p,
.frontend-customer-login-card__heading p {
    color: var(--color-text-muted, #666);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.frontend-customer-login-grid {
    display: grid;
    gap: var(--frontend-section-gap);
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
}

.frontend-customer-login-card,
.frontend-customer-signup-card {
    background: var(--color-surface-alt, #f7f7f7);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.frontend-customer-signup-card {
    display: flex;
    flex-direction: column;
}

.frontend-customer-login-card__heading {
    align-items: flex-start;
    display: flex;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.frontend-customer-login-card__heading > .fa-solid {
    color: var(--color-primary, #1779ba);
    flex: 0 0 1.5rem;
    font-size: 1.25rem;
    line-height: 1.4;
    text-align: center;
}

.frontend-customer-login-card__heading h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
}

.frontend-customer-login-info {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 8%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1779ba) 28%, var(--color-border, #cacaca));
    border-radius: var(--frontend-control-radius, 8px);
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.frontend-customer-login-info > .fa-solid {
    color: var(--color-primary, #1779ba);
    flex: 0 0 auto;
    line-height: 1.5;
}

.frontend-customer-login-info p {
    line-height: 1.5;
    margin: 0;
}

.frontend-customer-login-fields {
    margin-left: 0;
    margin-right: 0;
}

.frontend-customer-login-fields > .column {
    padding-left: 0;
    padding-right: 0;
}

.frontend-customer-login-form label {
    color: var(--color-text, #222);
    font-weight: 600;
}

.frontend-customer-login-form input[type="email"],
.frontend-customer-login-form input[type="text"] {
    background: var(--color-white, #fff);
    margin-top: 0.35rem;
}

.frontend-customer-login-form .buttonlogin .button {
    margin-bottom: 0.75rem;
    width: 100%;
}

.frontend-customer-login-form .buttonlogin:last-child .button {
    margin-bottom: 0;
}

.frontend-customer-signup-benefits {
    list-style: none;
    margin: 0 0 1.5rem;
}

.frontend-customer-signup-benefits li {
    align-items: flex-start;
    display: flex;
    gap: 0.65rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.frontend-customer-signup-benefits .fa-check {
    color: var(--color-primary, #1779ba);
    line-height: 1.45;
}

.frontend-customer-signup-action {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
    justify-content: center;
    margin: auto 0 0;
    width: 100%;
}

@media only screen and (max-width: 640px) {
    .frontend-customer-login-callout {
        padding: 1rem;
    }

    .frontend-booking-code-callout {
        padding: 1rem;
    }

    .frontend-customer-login-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .frontend-booking-code-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .frontend-customer-login-header__icon {
        flex-basis: 2.75rem;
        font-size: 1.1rem;
        height: 2.75rem;
    }

    .frontend-booking-code-header__icon {
        flex-basis: 2.75rem;
        font-size: 1.1rem;
        height: 2.75rem;
    }

    .frontend-booking-code-entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontend-booking-code-entry .button {
        width: 100%;
    }

    .frontend-customer-login-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Verbindliche Online-Stornierung als eigenstaendige Frontend-Maske. */
.frontend-cancellation-page {
    margin: 0 auto var(--frontend-section-gap);
    max-width: 75rem;
    width: 100%;
}

.frontend-cancellation-callout {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.frontend-cancellation-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-divider, #ddd);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.frontend-cancellation-header__icon {
    align-items: center;
    background: color-mix(in srgb, #b42318 10%, var(--color-white, #fff));
    border-radius: 50%;
    color: #b42318;
    display: inline-flex;
    flex: 0 0 3.25rem;
    font-size: 1.35rem;
    height: 3.25rem;
    justify-content: center;
}

.frontend-cancellation-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.frontend-cancellation-header p {
    color: var(--color-text-muted, #666);
    line-height: 1.5;
    margin: 0.5rem 0 0;
    max-width: 54rem;
}

.frontend-cancellation-grid {
    display: grid;
    gap: var(--frontend-section-gap);
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
}

.frontend-cancellation-form-card,
.frontend-cancellation-explanation {
    background: var(--color-surface-alt, #f7f7f7);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.frontend-cancellation-explanation {
    align-self: stretch;
}

.frontend-cancellation-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.frontend-cancellation-section-heading > .fa-solid {
    color: var(--color-primary, #1779ba);
    flex: 0 0 1.5rem;
    font-size: 1.25rem;
    line-height: 1.4;
    text-align: center;
}

.frontend-cancellation-section-heading h2,
.frontend-cancellation-unavailable h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
}

.frontend-cancellation-section-heading p {
    color: var(--color-text-muted, #666);
    line-height: 1.5;
    margin: 0.35rem 0 0;
}

.frontend-cancellation-required-note {
    color: var(--color-text-muted, #666);
    font-size: 0.82rem;
    margin: 0 0 0.75rem;
    text-align: right;
}

.frontend-cancellation-required-note > span,
.frontend-cancellation-field label > span:not(.frontend-cancellation-optional) {
    color: #b42318;
    margin-left: 0.15rem;
}

.frontend-cancellation-fields {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontend-cancellation-field {
    min-width: 0;
}

.frontend-cancellation-field--full {
    grid-column: 1 / -1;
}

.frontend-cancellation-field label {
    color: var(--frontend-text, #171717);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.frontend-cancellation-optional {
    color: var(--color-text-muted, #666);
    font-size: 0.82rem;
    font-weight: 400;
}

.frontend-cancellation-field input,
.frontend-cancellation-field textarea {
    background: var(--color-white, #fff);
    margin: 0.35rem 0 0;
}

.frontend-cancellation-field input[readonly] {
    background: color-mix(in srgb, var(--color-surface-alt, #efefef) 72%, var(--color-white, #fff));
    color: var(--color-text-muted, #666);
}

.frontend-cancellation-field-hint {
    color: var(--color-text-muted, #666);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.4rem 0 0;
}

.frontend-cancellation-actions {
    align-items: center;
    border-top: 1px solid var(--color-divider, #ddd);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

.frontend-cancellation-actions .button {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
    justify-content: center;
    margin: 0;
}

body.isfrontend .frontend-cancellation-submit,
body.isfrontend .frontend-cancellation-submit:hover,
body.isfrontend .frontend-cancellation-submit:focus {
    background: #b42318;
    color: #fff !important;
}

body.isfrontend .frontend-cancellation-submit:hover,
body.isfrontend .frontend-cancellation-submit:focus {
    background: #912018;
}

.frontend-cancellation-steps {
    list-style: none;
    margin: 0;
}

.frontend-cancellation-steps li {
    align-items: flex-start;
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    margin-bottom: 1rem;
}

.frontend-cancellation-steps li:last-child {
    margin-bottom: 0;
}

.frontend-cancellation-step-number {
    align-items: center;
    background: var(--color-primary, #1779ba);
    border-radius: 50%;
    color: var(--frontend-on-primary, #fff);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    min-width: 2rem;
    width: 2rem;
}

.frontend-cancellation-steps strong {
    display: block;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}

.frontend-cancellation-steps p {
    color: var(--color-text-muted, #666);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.frontend-cancellation-terms,
.frontend-cancellation-fee,
.frontend-cancellation-rebooking {
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-control-radius);
    margin-top: 0.75rem;
    padding: 1rem;
}

.frontend-cancellation-terms {
    background: var(--color-white, #fff);
}

.frontend-cancellation-info-title {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.frontend-cancellation-info-title > .fa-solid {
    color: var(--color-primary, #1779ba);
}

.frontend-cancellation-terms__content {
    color: var(--color-text-muted, #666);
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.frontend-cancellation-terms__content > :last-child {
    margin-bottom: 0;
}

.frontend-cancellation-fee {
    align-items: flex-start;
    background: color-mix(in srgb, #b42318 8%, var(--color-white, #fff));
    border-color: color-mix(in srgb, #b42318 35%, var(--color-border, #cacaca));
    display: flex;
    gap: 0.75rem;
}

.frontend-cancellation-fee > .fa-solid {
    color: #b42318;
    line-height: 1.5;
}

.frontend-cancellation-fee strong,
.frontend-cancellation-fee span {
    display: block;
}

.frontend-cancellation-fee span {
    font-size: 1.15rem;
    margin-top: 0.15rem;
}

.frontend-cancellation-rebooking {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 8%, var(--color-white, #fff));
    border-color: color-mix(in srgb, var(--color-primary, #1779ba) 28%, var(--color-border, #cacaca));
    display: flex;
    gap: 0.75rem;
}

.frontend-cancellation-rebooking > .fa-solid {
    color: var(--color-primary, #1779ba);
    line-height: 1.5;
}

.frontend-cancellation-rebooking p {
    line-height: 1.5;
    margin: 0;
}

.frontend-cancellation-success {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin: 0 0 var(--frontend-section-gap);
}

.frontend-cancellation-unavailable {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 8%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1779ba) 28%, var(--color-border, #cacaca));
    border-radius: var(--frontend-panel-radius);
    display: flex;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.frontend-cancellation-unavailable > .fa-solid {
    color: var(--color-primary, #1779ba);
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.4;
}

.frontend-cancellation-unavailable p {
    color: var(--color-text-muted, #666);
    line-height: 1.5;
    margin: 0.5rem 0 1rem;
}

.frontend-cancellation-contact {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
    overflow-wrap: anywhere;
}

@media only screen and (max-width: 800px) {
    .frontend-cancellation-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 640px) {
    .frontend-cancellation-callout {
        padding: 1rem;
    }

    .frontend-cancellation-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .frontend-cancellation-header__icon {
        flex-basis: 2.75rem;
        font-size: 1.1rem;
        height: 2.75rem;
    }

    .frontend-cancellation-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontend-cancellation-field--full {
        grid-column: auto;
    }

    .frontend-cancellation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .frontend-cancellation-actions .button {
        width: 100%;
    }
}

.buchungsuebersicht .column {
    margin-bottom: 6px;
}

.list_uebersicht_netto,
.list_uebersicht_gesamtbetrag {
    border-top: 1px solid var(--color-surface-alt);
}

.list_uebersicht_gesamt span:first-child {
    margin-right: 6px;
}

.extralarge {
    font-size: 21px;
}

.IconEditSmall {
    border: 0;
    display: inline-block;
    font-size: 1.1em;
    height: 1.1em;
    line-height: 1;
    margin-right: 3px;
    min-width: 1.1em;
    text-align: center;
    vertical-align: -0.125em;
}

#artikeldiv > .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.7em;
}

#artikeldiv .artikelauswahl > .row {
    height: 100%;
}

#artikeldiv .artikelauswahl_compact {
    margin-bottom: 10px;
}

#artikeldiv .artikelauswahl_large {
    margin-bottom: 10px;
    position: relative;
}

#artikeldiv .artikelauswahl_large .artikel_bezeichnung {
    margin-bottom: 65px;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich {
    bottom: 0;
    left: 0;
    padding-left: 30px;
    padding-right: 25px;
    position: absolute;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich .artikel_preis {
    min-height: 50px;
}

#artikeldiv .artikelauswahl_large img {
    max-width: 200px;
}

#tabs-artikel div.tabs.artikelextratabs {
    padding: 0;
}

#tabs-artikel div.tabs.artikelextratabs .ui-tabs-panel {
    padding-left: 0;
    padding-right: 0;
}

div#contentbereich:not(.sammelvorgang)
.divTab
div.column.cellfahrzeugnebeneinander
.fahrzeug_selector {
    padding: 0;
}

div.rowfahrzeugergebnis {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (min-width: 641px) {
    #fahrzeugliste .rowfahrzeugergebnis {
        margin-left: -1.875rem;
        margin-right: -1.875rem;
        max-width: none;
        width: auto;
    }
}

@media only screen and (min-width: 1024px) {
    body:has(#contentbereich #tab_column:not(.large-9))
    #tabs ul#tabbarheader.frontend-status-callout {
        margin-left: 0;
        width: 100%;
    }

    #tabs-3.frontend-checkout-callout .row {
        max-width: none;
    }

    body:has(#contentbereich #tab_column.large-9) .frontend-footer {
        margin-left: 1.5rem;
        margin-right: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        width: calc(75vw - 1.78515625rem);
    }

    body:has(#contentbereich #tab_column:not(.large-9)) .frontend-footer {
        margin-left: 1.125rem;
        margin-right: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        width: calc(100vw - 2.25rem);
    }
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight,
.hbcontainer .equalheight {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    box-shadow: 0 3px 6px #00000029;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.hbcontainer > .row > .column {
    padding-bottom: 10px;
    padding-right: 0.5rem;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .textinhalt {
    margin-bottom: 5rem;
    padding: 25px;
}
.rowfahrzeugergebnis
.cellfahrzeugnebeneinander
.equalheight
.textinhalt.belegt {
    margin-bottom: 10rem;
}

.content-vermietung {
    margin-top: 1.4rem;
}

.content-vermietung.sammelvorgang
.fahrzeug_selector
.row.sammelvorgang
.column {
    padding: 0;
}

.content-vermietung.sammelvorgang
.rowfahrzeugergebnis
.cellfahrzeugnebeneinander
.equalheight
.textinhalt {
    margin-bottom: 12rem;
}

.rowfahrzeugergebnis
.cellfahrzeugnebeneinander
.equalheight
.fahrzeug_selector_buttonfeld {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .row {
    margin: 0;
}

.rowfahrzeugergebnis
.cellfahrzeugnebeneinander
.equalheight
.row
.bildergalerie {
    padding: 0;
}

#fahrzeugliste div.divTab .columns.bildergalerie {
    padding: 0;
}

select#kilometer {
    max-width: 300px;
}

div.kilometerrow {
    margin-bottom: 10px;
    margin-top: 8px;
}

h3.hbheadline,
h3.artikel_headline {
    margin-bottom: 0.5rem;
}

div#haftungsbeschraenkung {
    margin-bottom: 15px;
    padding-top: 8px;
}

div#haftungsbeschraenkung .equalheight .row {
    margin: 5px;
}

div.hinweislink,
a.hinweislink {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: bold;
}

div.artikel_bezeichnung div.hinweislink {
    margin-top: 10px;
    text-align: right;
}

input:checked ~ .switch-paddle {
    background: var(--color-primary);
    border: 0;
    border-radius: 15px;
}

.switch-paddle {
    background: white;
}

input ~ .switch-paddle {
    border: 2px solid black;
    border-radius: 15px;
}

.switch-paddle:after {
    background: white;
    border: 2px solid black;
    border-radius: 15px;
    margin-top: -2px;
}

input:checked ~ .switch-paddle:after {
    margin-top: 0;
}

div.artikelauswahl_compact img.dateiextra {
    max-height: 100px;
}

#artikeldiv .artikelauswahl_compact > .row {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#artikeldiv > .row:has(> .artikelauswahl_compact) {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    max-width: none;
    width: 100%;
}

#artikeldiv > .row:has(> .artikelauswahl_compact)::before,
#artikeldiv > .row:has(> .artikelauswahl_compact)::after {
    display: none;
}

#artikeldiv > .row:has(> .artikelauswahl_compact) > .artikelauswahl_compact {
    margin-bottom: 0;
    width: auto;
}

div.artikelauswahl {
    padding: 0;
}

div.artikelauswahl > .row {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    box-shadow: 0 3px 6px #00000029;
    margin: 10px;
    padding-top: 5px;
}

div.artikelauswahl_after {
    margin-bottom: 30px;
}

.frontend-gallery {
    margin: 0 auto;
    max-width: 95%;
    position: relative;
}

.cellfahrzeugnebeneinander .frontend-gallery {
    max-width: 100%;
}

.frontend-gallery__viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.frontend-gallery__viewport::-webkit-scrollbar {
    display: none;
}

.frontend-gallery__viewport:focus-visible {
    outline: 2px solid var(--color-primary, #2671bc);
    outline-offset: 2px;
}

.frontend-gallery__track {
    display: flex;
}

.frontend-gallery__slide {
    align-items: center;
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    margin: 0;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    text-align: center;
}

div.artikelauswahl .frontend-gallery__slide {
    height: 200px;
}

.frontend-gallery__slide img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    width: auto;
}

div.fahrzeug_selector .frontend-gallery__slide img {
    max-height: 350px;
}

div.artikelauswahl .frontend-gallery__slide img {
    max-height: 200px;
}

.frontend-gallery__controls {
    display: flex;
    justify-content: space-between;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(50% - 1.5rem);
    z-index: 2;
}

.frontend-gallery__control,
.frontend-gallery__control:hover,
.frontend-gallery__control:focus {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    color: #222;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    margin: 0 0.75rem;
    opacity: 0.92;
    padding: 0;
    pointer-events: auto;
    transition: background-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease;
    width: 2.25rem;
}

.frontend-gallery__control:hover,
.frontend-gallery__control:focus-visible {
    background: var(--color-white, #fff);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    opacity: 1;
    transform: scale(1.06);
}

.frontend-gallery__control > .fa-solid {
    color: inherit !important;
    font-size: 0.875rem;
}

.frontend-gallery__control:disabled {
    cursor: default;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.frontend-gallery__control:focus-visible,
.frontend-gallery__dot:focus-visible {
    outline: 2px solid var(--color-primary, #2671bc);
    outline-offset: 2px;
}

.frontend-gallery__dots {
    display: flex;
    gap: 0.45rem;
    justify-content: center;
    padding: 0.6rem 0 0.25rem;
}

.frontend-gallery__dot {
    background: #b8b8b8;
    border: 0;
    border-radius: 50%;
    height: 0.75rem;
    margin: 0;
    padding: 0;
    width: 0.75rem;
}

.frontend-gallery__dot.is-active {
    background: #222;
}

.frontend-gallery__status {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .frontend-gallery__viewport {
        scroll-behavior: auto;
    }

    .frontend-gallery__control {
        transition: none;
    }
}

div.fahrzeug_selector_buttonfeld input[type="button"] {
    width: 100%;
}

#button_speichern #label_betrag {
    display: none;
}

.buchungsbestaetigungtop {
    margin-bottom: 30px;
}

#fahrerfeld h3 span {
    display: none;
}

#fahrerfeld h3 {
    color: black !important;
    font-size: 1.1rem;
    font-weight: bold !important;
    padding-left: 0 !important;
}

#fahrerfeld .ui-accordion .ui-accordion-content {
    border: 0;
    padding-left: 0;
}

div.preisanzeigesammel button {
    margin: 0;
}

div.rowfahrzeug {
    margin-top: 15px;
}

div.agbs {
    border: 1px solid var(--color-border);
    max-height: 200px;
    overflow-y: scroll;
    padding: 1.25rem;
    word-wrap: break-word;
}

div.bemerkungstext {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-height: 1.5em; /* fallback */
    max-height: 3em; /* fallback */
    overflow: hidden;
    text-overflow: ellipsis;
}

#box_buchungsuebersicht .fehler_buchung,
.fehlermeldung,
.div_auswahl_belegt {
    background-color: white;
    color: red;
}

#box_buchungsuebersicht {
    padding-top: 5.875rem;
}

div.fehler_buchung.callout.alert {
    margin-top: 10px;
}

.alternativen .fehlermeldung {
    margin-bottom: 10px;
    padding-left: 10px;
}

#fahrzeugliste .alternativen .fehlermeldung_kein_tarif {
    margin: 1rem 0 1.25rem;
    padding: 0 1rem;
}

#fahrzeugliste .alternativen .anfrage_button_div > .row.column {
    text-align: center;
}

#fahrzeugliste .alternativen .anfrage_button_div .button_anfrage {
    margin: 0 auto 1rem;
    min-width: 12rem;
    width: auto;
}

div.anfrage_button_div .column input.button_anfrage {
    margin-right: 0;
}

.ui-dialog .frontend-request-dialog {
    color: var(--color-text, #171717);
    padding: 0.25rem 0.5rem;
}

.frontend-request-dialog__intro {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #2671bc) 9%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #2671bc) 25%, var(--color-border, #cacaca));
    border-radius: var(--frontend-control-radius);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.frontend-request-dialog__intro > i {
    color: var(--color-primary, #2671bc);
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.frontend-request-dialog__intro p {
    margin: 0;
}

.frontend-request-dialog__hint {
    color: var(--color-text-muted, #666);
    margin-top: 0.25rem !important;
}

.frontend-request-dialog__form {
    display: grid;
    gap: 0.875rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    max-width: none;
}

.frontend-request-dialog__form > .column {
    float: none;
    min-width: 0;
    padding: 0;
    width: auto;
}

.frontend-request-dialog__field label {
    color: var(--color-text, #171717);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.frontend-request-dialog__field input {
    margin: 0;
}

.frontend-request-dialog__field--full,
.frontend-request-dialog__summary-wrap,
.frontend-request-dialog__summary,
.frontend-request-dialog__actions {
    grid-column: 1 / -1;
}

.frontend-request-dialog__summary-wrap {
    grid-row: 1;
}

.frontend-request-dialog__summary-wrap + .frontend-request-dialog__field {
    grid-column: 1;
}

.frontend-request-dialog__summary {
    background: var(--color-surface-alt, #f4f4f4);
    border-radius: var(--frontend-control-radius);
    display: grid;
    gap: 0.75rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.125rem;
    padding: 1rem;
}

.frontend-request-dialog__summary-group {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontend-request-dialog__summary b,
.frontend-request-dialog__summary .anfrage_info {
    display: block;
}

.frontend-request-dialog__summary b {
    color: var(--color-text-muted, #666);
    font-size: 0.8125rem;
    margin-bottom: 0.125rem;
}

.frontend-request-dialog__actions {
    align-items: center;
    border-top: 1px solid var(--color-divider, #ddd);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.375rem;
    padding-top: 1rem !important;
}

.frontend-request-dialog__actions .button {
    margin: 0;
    min-width: 8.5rem;
}

div.div_alternative_content input[type="button"]:first-child {
    margin-right: 15px;
}

fieldset.checkout {
    align-items: center;
    display: flex;
}

fieldset.checkout .switch {
    float: left;
    margin-bottom: 0;
    margin-right: 10px;
}

.dialog_meldung_popup .buttonclose {
    display: none;
}

div.alternative_zeit .ui-datepicker {
    margin: auto;
}

ul.alternativen_list,
ul.alternativen_list li {
    list-style-type: none;
    width: 100%;
}

ul.alternativen_list li a {
    width: 100%;
}

ul.alternativen_list {
    margin: 0;
    margin-top: 10px;
}

.selectzeit {
    margin-left: 8px;
    margin-top: 3px;
}

div#login_info {
    margin-bottom: 10px;
}

.frontend-login-code-info {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #1779ba) 8%, var(--color-white, #fff));
    border-color: color-mix(in srgb, var(--color-primary, #1779ba) 30%, var(--color-border, #cacaca));
    border-radius: 10px;
    color: var(--color-text, #262626);
    display: flex;
    gap: 0.875rem;
    margin: 0 0 1rem;
    padding: 1rem 1.125rem;
}

.frontend-login-code-info > .fa-circle-info {
    color: var(--color-primary, #1779ba);
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.5;
}

.frontend-login-code-info strong {
    display: block;
    margin-bottom: 0.25rem;
}

.frontend-login-code-info p {
    line-height: 1.5;
    margin: 0;
}

.frontend-login-delivery-status {
    align-items: flex-start;
    background: color-mix(in srgb, #16834a 10%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, #16834a 40%, var(--color-border, #cacaca));
    border-radius: var(--frontend-control-radius, 8px);
    color: var(--color-text, #262626);
    display: flex;
    gap: 0.75rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    padding: 0.875rem 1rem;
}

.frontend-login-delivery-status > .fa-solid {
    color: #16834a;
    flex: 0 0 auto;
    line-height: 1.5;
}

.frontend-login-delivery-status.is-error {
    background: color-mix(in srgb, #b42318 9%, var(--color-white, #fff));
    border-color: color-mix(in srgb, #b42318 38%, var(--color-border, #cacaca));
}

.frontend-login-delivery-status.is-error > .fa-solid {
    color: #b42318;
}

.frontend-login-code-entry .button {
    margin-left: 0;
    width: 100%;
}

.frontend-login-code-resend {
    margin-top: 0.75rem;
}

.frontend-login-code-resend .button {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
}

div.buchungsbestaetigungtop,
div.buchungsbestaetigungrow {
    max-width: 1000px;
}

div.buchungsbestaetigungrow input,
div.buchungsbestaetigungrow a {
    margin-left: 8px;
}

.booking-confirmation-tabs {
    background: color-mix(in srgb, var(--color-primary, #2671bc) 10%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #2671bc) 42%, var(--color-border, #ddd));
    border-radius: var(--frontend-control-radius, 8px);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0.25rem;
}

.booking-confirmation-tabs .tabs-title {
    flex: 1 1 0;
    float: none;
    margin: 0;
    min-width: 0;
    width: auto;
}

.booking-confirmation-tabs .tabs-title > a {
    border-radius: calc(var(--frontend-control-radius, 8px) - 2px);
    color: var(--color-text-muted, #666);
    display: flex;
    font-weight: 600;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
    padding: 0.8rem 1rem;
    text-align: center;
}

.booking-confirmation-tabs .tabs-title > a:hover,
.booking-confirmation-tabs .tabs-title > a:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #2671bc) 18%, var(--color-white, #fff));
    color: var(--color-primary, #2671bc);
}

.booking-confirmation-tabs .tabs-title.is-active > a,
.booking-confirmation-tabs .tabs-title > a[aria-selected="true"] {
    background: var(--color-primary, #2671bc);
    box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
    color: var(--frontend-on-primary, #fff);
}

.booking-confirmation-content {
    background: transparent;
    border: 0;
}

.booking-confirmation-content > .tabs-panel {
    padding: 0;
}

.booking-confirmation-content--single > .tabs-panel {
    padding-top: 0;
}

.booking-confirmation-notice,
.booking-confirmation-vehicle-callout {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
}

.booking-confirmation-notice {
    padding: 1.25rem;
}

.booking-confirmation-notice p {
    margin: 0;
}

.booking-confirmation-vehicle-callout {
    margin: 0;
    overflow: hidden;
    padding: 1.25rem;
}

.booking-confirmation-vehicle-callout > .fahrzeug_selector {
    align-items: start;
    display: grid;
    gap: 0.75rem 1.25rem;
    grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.15fr);
    margin: 0;
    max-width: none;
    width: 100%;
}

.booking-confirmation-vehicle-callout .beschriftungheadline,
.booking-confirmation-vehicle-callout .bildergalerie > .row.column {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    text-align: left;
    width: auto;
}

.booking-confirmation-vehicle-callout .beschriftungheadline h5,
.booking-confirmation-vehicle-callout .bildergalerie > .row.column h5 {
    margin: 0;
}

.booking-confirmation-vehicle-callout .beschriftungheadline + .bildergalerie > .row.column {
    display: none;
}

.booking-confirmation-vehicle-callout .bildergalerie {
    aspect-ratio: auto;
    background: transparent;
    display: contents;
}

.booking-confirmation-vehicle-callout .bildergalerie > .bildcontent {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.booking-confirmation-vehicle-callout .textinhalt {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    text-align: left;
    width: auto;
}

.booking-confirmation-summary {
    background: var(--color-surface-alt, #f7f7f7);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 12px;
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.booking-confirmation-content .booking-confirmation-summary {
    margin-bottom: var(--frontend-section-gap);
}

.booking-confirmation-summary__group {
    line-height: 1.65;
    min-width: 0;
    text-align: left;
}

.booking-confirmation-summary__group + .booking-confirmation-summary__group {
    border-top: 1px solid var(--color-divider, #ddd);
    padding-top: 1rem;
}

.booking-confirmation-summary__group h2 {
    color: var(--color-text-muted, #666);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.booking-confirmation-summary__group .IconEditSmall {
    color: var(--color-primary, #2671bc);
    margin-right: 0.4rem;
    text-align: center;
    width: 1.25rem;
}

.buchungsbestaetigungrow {
    margin: var(--frontend-section-gap) auto 0;
    max-width: 48rem;
}

.booking-confirmation-actions {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-confirmation-actions-callout,
.booking-confirmation-access-notice {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
    padding: 0.875rem;
}

.booking-confirmation-access-notice {
    margin: var(--frontend-section-gap) auto 0;
    max-width: 48rem;
}

.booking-confirmation-actions__group {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-confirmation-actions__group--documents,
.booking-confirmation-actions__danger {
    grid-column: 1 / -1;
}

.booking-confirmation-actions__group--manage,
.booking-confirmation-actions__group--utilities {
    grid-template-columns: minmax(0, 1fr);
}

.booking-confirmation-actions__primary {
    grid-column: 1 / -1;
}

.booking-confirmation-actions .button {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
    justify-content: center;
    margin: 0;
    min-height: 2.75rem;
    white-space: normal;
    width: 100%;
}

.booking-confirmation-actions .button.hollow.secondary {
    border-color: var(--color-border, #bbb);
    color: var(--color-text-muted, #666);
}

.booking-confirmation-actions__danger {
    border-top: 1px solid var(--color-divider, #ddd);
    padding-top: 0.625rem;
    text-align: right;
}

.booking-confirmation-actions__danger .button {
    width: auto;
}

.booking-confirmation-page {
    margin: clamp(1.5rem, 4vw, 3.5rem) auto var(--frontend-section-gap);
    max-width: 75rem;
    width: 100%;
}

.booking-confirmation-page .buchungsbestaetigungtop {
    align-items: center;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 var(--frontend-section-gap);
    max-width: none;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.booking-confirmation-page .buchungsbestaetigungtop h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.booking-confirmation-page .buchungsbestaetigung {
    display: grid;
    gap: var(--frontend-section-gap);
}

.booking-confirmation-page .booking-confirmation-notice {
    margin: 0 0 var(--frontend-section-gap);
    text-align: left;
}

.booking-confirmation-page .buchungsbestaetigungrow {
    margin: var(--frontend-section-gap) 0 0;
    max-width: none;
}

.booking-confirmation-content .quittungsseite {
    display: grid;
    gap: var(--frontend-section-gap);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    max-width: none;
    width: 100%;
}

.booking-confirmation-content .quittungsseite::before,
.booking-confirmation-content .quittungsseite::after {
    content: none;
    display: none;
}

.booking-confirmation-content .quittungsseite > .artikelauswahl {
    float: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.booking-confirmation-content .quittungsseite > .artikelauswahl > .row {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 1.25rem;
}

.booking-confirmation-content .quittungsseite > .artikelauswahl > .row > .columns:first-child {
    padding-top: 0.25rem;
}

.booking-confirmation-content .quittungsseite > .artikelauswahl .frontend-gallery-wrap,
.booking-confirmation-content .quittungsseite > .artikelauswahl > .row > .columns:first-child > img {
    margin-bottom: 0.875rem;
}

@media only screen and (min-width: 641px) {
    .booking-confirmation-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-confirmation-summary__group + .booking-confirmation-summary__group {
        border-left: 1px solid var(--color-divider, #ddd);
        border-top: 0;
        padding-left: 1.25rem;
        padding-top: 0;
    }

    .booking-confirmation-content .quittungsseite {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-confirmation-content .quittungsseite > .artikelauswahl .large-text-center {
        text-align: left;
    }

    .booking-confirmation-content .quittungsseite > .artikelauswahl .frontend-gallery-wrap {
        margin-left: 0;
        margin-right: auto;
    }
}

@media only screen and (max-width: 640px) {
    .frontend-request-dialog-frame,
    body.isfrontend .ui-dialog:has(> #anfrage_dialog) {
        bottom: 0.5rem !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: auto !important;
        max-height: none;
        overflow: hidden !important;
        position: fixed !important;
        top: 0.5rem !important;
    }

    .frontend-request-dialog-frame .ui-dialog-titlebar,
    body.isfrontend .ui-dialog:has(> #anfrage_dialog) .ui-dialog-titlebar {
        flex: 0 0 auto;
    }

    .frontend-request-dialog-frame .frontend-request-dialog,
    body.isfrontend .ui-dialog:has(> #anfrage_dialog) .frontend-request-dialog {
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        height: auto !important;
        max-height: none;
        min-height: 0;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding: 0.75rem 1rem;
    }

    .frontend-request-dialog__form,
    .frontend-request-dialog__summary {
        grid-template-columns: 1fr;
    }

    .frontend-request-dialog__summary-group {
        grid-template-columns: 1fr;
    }

    .frontend-request-dialog__field,
    .frontend-request-dialog__actions {
        grid-column: 1;
    }

    .frontend-request-dialog__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .frontend-request-dialog__actions .button {
        width: 100%;
    }

    .booking-confirmation-vehicle-callout > .fahrzeug_selector {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-confirmation-vehicle-callout .beschriftungheadline,
    .booking-confirmation-vehicle-callout .bildergalerie > .row.column,
    .booking-confirmation-vehicle-callout .bildergalerie > .bildcontent,
    .booking-confirmation-vehicle-callout .textinhalt {
        grid-column: 1;
        grid-row: auto;
    }

    .booking-confirmation-actions__group {
        grid-template-columns: 1fr;
    }

    .booking-confirmation-actions {
        grid-template-columns: 1fr;
    }

    .booking-confirmation-actions__danger,
    .booking-confirmation-actions__danger .button {
        width: 100%;
    }

    .booking-confirmation-page .buchungsbestaetigungtop {
        padding: 1.25rem 1rem;
    }
}

div.buchungsbestaetigungcontainer {
    width: 100%;
}

div.buchungsbestaetigung div.artikelauswahl_large img {
    max-height: 120px;
}
div.buchungsbestaetigung .fzg_beschreibungstext,
div.buchungsbestaetigung .column {
    text-align: left;
}

div.margin-top {
    margin-top: 20px;
}

div.preisanzeigebereich select {
    margin: auto;
}

ul.nolist {
    list-style-type: none;
    margin-left: 0;
    padding: 0;
}

ul.nolist input[type="radio"] {
    display: none;
}

.artikelauswahl_compact div.columns h5 {
    overflow: hidden;
    text-overflow: ellipsis;
}

div.content-vermietung.sammelvorgang div.fahrzeug_selector_buttonfeld {
    padding: 10px;
}

/*Sammelbuchung Leiste unten*/
#warenkorb_seite1_unten {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 2;
}
/*Sammelbuchung Leiste unten*/
a.bookytlogo {
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: 1;
}
#warenkorb_seite1_unten_leiste {
    background-color: var(--color-primary);
    color: var(--frontend-on-primary, #fff);
    filter: brightness(120%);
    padding: 10px 0;
    text-align: center;
}
#warenkorb_seite1_unten_leiste * {
    color: var(--frontend-on-primary, #fff);
}
#warenkorb_seite1_unten #button_weiter_unten {
    border-radius: 0;
    margin-bottom: 3px;
    width: 100%;
}
#warenkorb_seite1_unten_before {
    height: 70px;
}
.tinybuttonwarenkorb {
    float: none;
}

body.isfrontend .buchungsuebersicht input.tinybuttonwarenkorb {
    font-size: 0.625rem;
    line-height: 1;
    height: 1.375rem;
    margin: 0 0.25rem 0 0;
    min-height: 1.375rem;
    padding: 0;
    vertical-align: middle;
    width: 1rem;
}

.warenkorb {
    margin: 30px;
    max-width: 1200px;
}

#buchungsbuttonarea button span {
    color: var(--frontend-on-primary, #fff);
}
#buchungsbuttonarea button.hollow span {
    color: var(--color-primary);
}

select.sprachbox {
    max-width: 155px;
}

.frontend-header-bar,
.frontend-header-actions {
    align-items: center;
    display: flex;
}

.frontend-header-bar {
    justify-content: flex-end;
    margin-bottom:1rem;
}

.frontend-header-bar .top_logo {
    margin-right: auto;
}

.frontend-header-actions {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
}

.frontend-header-nav {
    align-items: center;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: 999px;
    box-shadow: 0 4px 14px #0000000d;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: flex-end;
    padding: 0.25rem;
}

.frontend-header-nav__link {
    align-items: center;
    border-radius: 999px;
    color: var(--color-primary, #1779ba);
    display: inline-flex;
    font-weight: 600;
    gap: 0.45rem;
    line-height: 1.2;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.frontend-night-shift-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--color-primary, #1779ba);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 600;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-height: 0;
    padding: 0;
    width: 2.25rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.frontend-header-nav__link:hover,
.frontend-header-nav__link:focus-visible,
.frontend-night-shift-toggle:hover,
.frontend-night-shift-toggle:focus-visible {
    background: var(--color-surface-alt, #f4f4f4);
    color: var(--color-primary, #1779ba);
    text-decoration: none;
}

.frontend-header-nav__link:focus-visible,
.frontend-night-shift-toggle:focus-visible {
    outline: 2px solid var(--color-primary, #1779ba);
    outline-offset: 2px;
}

.frontend-night-shift-toggle[aria-pressed="true"] {
    background: var(--color-primary, #1779ba);
    color: var(--frontend-on-primary, #fff);
}

.frontend-header-nav__link--logout {
    color: var(--color-text-muted, #767676);
}

.frontend-header-language select.sprachbox {
    margin-bottom: 0;
    width: 155px;
}

html.frontend-is-embedded body > header {
    display: none !important;
}

.frontend-iframe-handoff-error,
.frontend-iframe-handoff-status,
.frontend-iframe-handoff-feedback {
    margin-bottom: 1rem;
}

.frontend-iframe-handoff-status .callout,
.frontend-iframe-handoff-feedback .callout {
    padding: 1.25rem;
}

.frontend-iframe-handoff-status h2 {
    font-size: 1.35rem;
    margin: 0.5rem 0;
}

.frontend-iframe-handoff-status p {
    margin-bottom: 0;
}

.frontend-iframe-handoff-status i,
.frontend-iframe-handoff-feedback i,
.frontend-iframe-handoff-error i {
    margin-right: 0.5rem;
}

@media only screen and (max-width: 640px) {
    .frontend-header-actions {
        gap: 0.5rem;
        width: 100%;
    }

    .frontend-header-nav {
        border-radius: var(--frontend-control-radius, 8px);
        justify-content: center;
        width: 100%;
    }

    .frontend-header-nav__link {
        justify-content: center;
    }

}

.hideNurGruppen {
    display: none !important;
}

div.columns.frei .column .button[disabled] {
    display: none;
}

div.shrinked_text {
    /* Vertikale Box‑Orientierung */
    -webkit-box-orient: vertical;
    /* Notwendig, damit WebKit den Clamp anwenden kann */
    display: -webkit-box;
    /* Anzahl der Zeilen */
    -webkit-line-clamp: 6;

    /* Verberge den restlichen Text */
    overflow: hidden;

    /* Optional: füge "…" am Ende der letzten Zeile hinzu */
    text-overflow: ellipsis;
}

.callout.content-width {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

/* Gutschein - Shop */
.tabs-panel.is-active {
    display: block;
}


/* Produktliste (Shop): gleiche Höhen + Bottom-Section immer unten */
.row.product-list {
    display: flex;
    flex-wrap: wrap;
}

/* Jede Grid-Spalte soll ihre Card auf volle Höhe strecken */
.row.product-list > .columns {
    display: flex;
    padding-bottom: 12px;
}

/* Card als Flex-Spalte, damit wir unten "ankern" können */
.row.product-list .card {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* Unterer Bereich (Preis/Form/Button) immer nach unten */
.row.product-list .card .card-section-bottom {
    margin-top: auto;
}

/* In der Bottom-Section: Button unten/rechts in seiner Spalte */
.row.product-list .card .card-section-bottom .row {
    display: flex;
}

.row.product-list .card .card-section-bottom .row > .columns {
    display: flex;
    flex-direction: column;
}

.row.product-list .card .card-section-bottom .button,
.row.product-list .card .card-section-bottom button.button {
    align-self: flex-end;
    margin-bottom: 0;
    margin-top: auto;
    width: fit-content;
}

.row.product-list .input-group-field {
    max-width: 150px;
}

/* Produktkarten (2026 Style): leichte Tiefe + Hover, passend zu den Variablen */
.row.product-list .card.product-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 18px #0000000f;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Headline etwas knackiger */
.row.product-list .card.product-card h3 {
    font-size: 1.02rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* Text etwas ruhiger */
.row.product-list .card.product-card p {
    color: var(--color-text-muted);
}

/* Bottom-Section als dezenter "Footer" */
.row.product-list .card.product-card .card-section-bottom {
    border-top: 1px solid var(--color-surface-alt);
    background: var(--color-white);
}

/* Preis etwas präsenter */
.row.product-list .card.product-card .price {
    font-weight: 800;
    margin-bottom: 0.75rem;
}

@media only screen and (max-width: 640px) {
    .row.product-list .card.product-card {
        border-radius: 10px;
    }
}

#tabs_kunde_wrapper ul.tabs,
div.tabs-container {
    border-radius: 8px 8px 0 0;
}

#tabs_kunde_wrapper > ul.tabs,
#tabs_kundendaten_wrapper > ul.tabs {
    background: transparent;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--frontend-section-gap);
}

#tabs_kunde_wrapper > ul.tabs > .tabs-title,
#tabs_kundendaten_wrapper > ul.tabs > .tabs-title {
    float: none;
}

#tabs_kunde_wrapper > ul.tabs > .tabs-title > a,
#tabs_kundendaten_wrapper > ul.tabs > .tabs-title > a {
    background: transparent;
    border: 1px solid var(--color-border, #cacaca);
    border-radius: 999px;
    color: var(--color-primary, #2671bc);
    padding: 0.75rem 1rem;
}

#tabs_kunde_wrapper > ul.tabs > .tabs-title > a:hover,
#tabs_kunde_wrapper > ul.tabs > .tabs-title > a:focus-visible,
#tabs_kundendaten_wrapper > ul.tabs > .tabs-title > a:hover,
#tabs_kundendaten_wrapper > ul.tabs > .tabs-title > a:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #2671bc) 9%, transparent);
    border-color: var(--color-primary, #2671bc);
}

#tabs_kunde_wrapper > ul.tabs > .tabs-title.is-active > a,
#tabs_kunde_wrapper > ul.tabs > .tabs-title > a[aria-selected="true"],
#tabs_kundendaten_wrapper > ul.tabs > .tabs-title.is-active > a,
#tabs_kundendaten_wrapper > ul.tabs > .tabs-title > a[aria-selected="true"] {
    background: var(--color-primary, #2671bc);
    border-color: var(--color-primary, #2671bc);
    color: var(--frontend-on-primary, #fff);
}

#tabs_kunde_wrapper > .tabs-content,
#tabs_kundendaten_wrapper > .tabs-content {
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
}

#tabs_kundendaten_wrapper > .tabs-content > .tabs-panel {
    padding: 1.25rem;
}

.frontend-contract-confirmation {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #2671bc) 14%, var(--color-white, #fff)), var(--color-white, #fff) 64%);
    border: 1px solid color-mix(in srgb, var(--color-primary, #2671bc) 38%, var(--color-border, #cacaca));
    border-left: 0.4rem solid var(--color-primary, #2671bc);
    border-radius: var(--frontend-panel-radius);
    box-shadow: 0 0.7rem 1.75rem color-mix(in srgb, var(--color-primary, #2671bc) 12%, transparent);
    margin: 0 0 var(--frontend-section-gap);
    padding: 1.5rem;
}

.frontend-contract-confirmation__header {
    align-items: flex-start;
    display: grid;
    gap: 1rem;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    margin-bottom: 1.25rem;
}

.frontend-contract-confirmation__header-icon {
    align-items: center;
    background: var(--color-primary, #2671bc);
    border-radius: 50%;
    color: var(--frontend-on-primary, #fff);
    display: inline-flex;
    font-size: 1.25rem;
    height: 3.25rem;
    justify-content: center;
    width: 3.25rem;
}

.frontend-contract-confirmation__eyebrow {
    color: var(--color-primary, #2671bc);
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.frontend-contract-confirmation__header h2 {
    color: var(--frontend-text, #171717);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.2;
    margin: 0;
}

.frontend-contract-confirmation__header p {
    color: var(--color-text-muted, #666);
    line-height: 1.5;
    margin: 0.4rem 0 0;
}

.frontend-contract-confirmation__list {
    display: grid;
    gap: 0.75rem;
}

.frontend-contract-confirmation__item {
    align-items: center;
    background: var(--color-white, #fff);
    border: 1px solid color-mix(in srgb, var(--color-primary, #2671bc) 20%, var(--color-border, #cacaca));
    border-radius: var(--frontend-control-radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem;
}

.frontend-contract-confirmation__booking {
    min-width: 0;
}

.frontend-contract-confirmation__booking h3 {
    color: var(--frontend-text, #171717);
    font-size: 1rem;
    line-height: 1.35;
    margin: 0 0 0.45rem;
}

.frontend-contract-confirmation__meta {
    align-items: center;
    color: var(--color-text-muted, #666);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.45rem 1.1rem;
    line-height: 1.4;
}

.frontend-contract-confirmation__meta > span {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.frontend-contract-confirmation__meta .fa-regular,
.frontend-contract-confirmation__meta .fa-solid {
    color: var(--color-primary, #2671bc);
    flex: 0 0 auto;
}

body.isfrontend .frontend-contract-confirmation__action {
    align-items: center;
    border-radius: var(--frontend-control-radius);
    display: inline-flex;
    font-weight: 700;
    gap: 0.55rem;
    justify-content: center;
    margin: 0;
    min-height: 3rem;
    padding: 0.75rem 1rem;
}

.frontend-contract-confirmation--verification {
    background: linear-gradient(135deg, color-mix(in srgb, #d99000 14%, var(--color-white, #fff)), var(--color-white, #fff) 64%);
    border-color: color-mix(in srgb, #d99000 42%, var(--color-border, #cacaca));
    border-left-color: #b87500;
    box-shadow: 0 0.7rem 1.75rem color-mix(in srgb, #b87500 12%, transparent);
}

.frontend-contract-confirmation--verification .frontend-contract-confirmation__header {
    margin-bottom: 0;
}

.frontend-contract-confirmation--verification .frontend-contract-confirmation__header-icon {
    background: #b87500;
}

.frontend-contract-confirmation--verification .frontend-contract-confirmation__eyebrow {
    color: #8a5700;
}

body.isfrontend .frontend-contract-confirmation--verification .frontend-contract-confirmation__action {
    margin-top: 1rem;
}

.frontend-contract-confirmation__verification-contact {
    border-top: 1px solid color-mix(in srgb, #b87500 30%, var(--color-border, #cacaca));
    color: var(--frontend-text, #171717) !important;
    font-weight: 600;
    margin-top: 1rem !important;
    padding-top: 0.85rem;
}

:root[data-frontend-theme="night"] .frontend-contract-confirmation--verification .frontend-contract-confirmation__eyebrow {
    color: #f2b84b;
}

.frontend-customer-data-form {
    background: color-mix(in srgb, var(--color-surface-alt, #efefef) 42%, var(--color-white, #fff));
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    padding: 1.25rem;
}

.frontend-identity-upload-status {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #2671bc) 9%, var(--color-white, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #2671bc) 30%, var(--color-border, #cacaca));
    border-radius: var(--frontend-control-radius);
    color: var(--frontend-text, #171717);
    display: flex;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
}

#ausweisdms {
    scroll-margin-top: 1rem;
}

.frontend-identity-upload-status__icon {
    color: var(--color-primary, #2671bc);
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.35;
}

.frontend-identity-upload-status strong,
.frontend-identity-upload-status span {
    display: block;
}

.frontend-identity-upload-status strong {
    line-height: 1.35;
}

.frontend-identity-upload-status div > span {
    color: var(--color-text-muted, #666);
    line-height: 1.45;
    margin-top: 0.2rem;
}

.frontend-customer-data-form label {
    color: var(--frontend-text, #171717);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.frontend-customer-data-form input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
.frontend-customer-data-form select,
.frontend-customer-data-form textarea {
    border-color: var(--color-border, #cacaca);
    border-radius: var(--frontend-control-radius);
    min-height: 3rem;
    padding: 0.7rem 0.75rem;
}

.frontend-customer-data-form input:not([type="checkbox"]):not([type="radio"]):focus,
.frontend-customer-data-form select:focus,
.frontend-customer-data-form textarea:focus {
    border-color: var(--color-primary, #2671bc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #2671bc) 22%, transparent);
}

.frontend-customer-data-form .row.column > hr {
    margin: 0.5rem 0 1.25rem;
}

#tabs_kundendaten_wrapper > .tabs-content > .tabs-panel > .row.column.text-right {
    margin-top: var(--frontend-section-gap);
}

#tabs_kundendaten_wrapper > .tabs-content > .tabs-panel > .row.column.text-right > br {
    display: none;
}

#tabs_kundendaten_wrapper > .tabs-content > .tabs-panel > .row.column.text-right .button {
    border-radius: var(--frontend-control-radius);
    margin-bottom: 0;
}

.frontend-customer-bookings-table {
    background: transparent;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    width: 100%;
}

.frontend-customer-bookings-table thead,
.frontend-customer-bookings-table tbody {
    background: transparent;
    border: 0;
}

.frontend-customer-bookings-table thead td {
    border-bottom: 1px solid var(--color-border, #cacaca);
    font-weight: 700;
    line-height: 1.25;
    padding: 0.7rem 0.75rem;
    vertical-align: bottom;
}

.frontend-customer-bookings-table tbody td {
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #cacaca) 55%, transparent);
    line-height: 1.35;
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

.frontend-customer-bookings-table tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--color-surface-alt, #efefef) 52%, var(--color-white, #fff));
}

.frontend-customer-bookings-table tbody tr:nth-child(even) {
    background: var(--color-white, #fff);
}

.frontend-customer-bookings-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary, #2671bc) 9%, var(--color-white, #fff));
}

.frontend-customer-bookings-table td:last-child {
    white-space: nowrap;
}

.frontend-customer-bookings-table .button.small {
    border-radius: var(--frontend-control-radius);
    margin: 0;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
}

.tabs-title > a {
    font-size: 1rem;
}

.tabs-content {
    border-radius: 0 0 8px 8px;
}

.callout_kundendaten {
    margin-top: 4rem;
}

.max-width-800 {
    margin: auto;
    max-width: 800px;
}

#firstrow {
    margin-top: 1rem;
}

.top_logo {
    display: inline;
    max-width: 80px;
}

.callout,
.callout.alert,
.callout.secondary {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
}

/* Einheitliches Layoutsystem fuer den oeffentlichen Buchungsprozess. */
body.isfrontend input[type="text"],
body.isfrontend input[type="email"],
body.isfrontend input[type="password"],
body.isfrontend input[type="number"],
body.isfrontend input[type="tel"],
body.isfrontend input[type="date"],
body.isfrontend input[type="time"],
body.isfrontend select,
body.isfrontend textarea {
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-control-radius) !important;
    box-shadow: none;
    min-height: 2.75rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

body.isfrontend input:focus,
body.isfrontend select:focus,
body.isfrontend textarea:focus {
    border-color: var(--color-primary, #2671bc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #2671bc) 18%, transparent);
    outline: 0;
}

body.isfrontend textarea {
    min-height: 5rem;
    resize: vertical;
}

body.isfrontend .button,
body.isfrontend button.button,
body.isfrontend input.button {
    border-radius: var(--frontend-control-radius);
    min-height: 2.75rem;
}

/* Eigenstaendige Registrierungsseite im gemeinsamen Frontend-v6-Kartenstil. */
.frontend-registration-page {
    margin: 0 auto var(--frontend-section-gap);
    max-width: 75rem;
    width: 100%;
}

.frontend-registration-callout {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.frontend-registration-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-divider, #ddd);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.frontend-registration-header__icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary, #2671bc) 12%, var(--color-white, #fff));
    border-radius: 50%;
    color: var(--color-primary, #2671bc);
    display: inline-flex;
    flex: 0 0 3.25rem;
    font-size: 1.35rem;
    height: 3.25rem;
    justify-content: center;
}

.frontend-registration-header__content {
    min-width: 0;
}

.frontend-registration-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.frontend-registration-intro {
    color: var(--color-text-muted, #666);
    line-height: 1.55;
    margin-top: 0.75rem;
    max-width: 65rem;
}

.frontend-registration-intro > :last-child {
    margin-bottom: 0;
}

.frontend-registration-form__surface,
.frontend-registration-privacy {
    background: var(--color-surface-alt, #f7f7f7);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.frontend-registration-form__surface {
    margin-bottom: var(--frontend-section-gap);
}

.frontend-registration-form #kundendaten_feld > div > .row:first-child h1 {
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 0 0 1.25rem;
}

.frontend-registration-form #kundendaten_feld label,
.frontend-registration-form #kundendaten_feld .ausweisdaten > .columns {
    color: var(--color-text, #222);
    font-weight: 600;
}

.frontend-registration-form #kundendaten_feld input,
.frontend-registration-form #kundendaten_feld select,
.frontend-registration-form #kundendaten_feld textarea {
    background: var(--color-white, #fff);
    font-weight: 400;
    margin-top: 0.3rem;
}

.frontend-registration-form #kundendaten_feld .column:empty {
    display: none;
}

.frontend-registration-form #kundendaten_feld hr {
    border-color: var(--color-divider, #ddd);
    margin: 0.5rem 0 1.5rem;
}

.frontend-registration-privacy > .row.column {
    padding: 0;
}

.frontend-registration-privacy #hinweis_disclaimer {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

.frontend-registration-privacy #hinweis_disclaimer legend {
    color: var(--color-text, #222);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.frontend-registration-privacy #hinweis_disclaimer_akzeptiert {
    margin: 0 0.625rem 0 0;
    vertical-align: middle;
}

.frontend-registration-privacy #hinweis_disclaimer span {
    vertical-align: middle;
}

.frontend-registration-actions {
    border-top: 1px solid var(--color-divider, #ddd);
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

.frontend-registration-actions .button {
    margin: 0;
    min-width: 12rem;
}

#tabs > .frontend-step-callout {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
}

#tabs-3.frontend-checkout-callout .row,
#tabs-2.frontend-customer-callout .row {
    max-width: none;
}

#box_buchungsuebersicht {
    padding-top: 4.9375rem;
}

.frontend-summary-callout {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
    padding: 1.25rem;
}

.frontend-summary-callout h4,
.frontend-summary-callout h5 {
    margin-top: 0;
}

/* Fahrzeugkarten: echtes Grid statt negativer Foundation-Abstaende. */
#fahrzeugliste .frontend-card-grid {
    align-items: stretch;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    margin: var(--frontend-section-gap) 0 0;
    max-width: none;
    width: 100%;
}

#fahrzeugliste .frontend-card-grid::before,
#fahrzeugliste .frontend-card-grid::after {
    content: none;
    display: none;
}

#fahrzeugliste .ui-tabs .ui-tabs-panel,
#fahrzeugliste .divTab > .ui-tabs-panel {
    padding-left: 0;
    padding-right: 0;
}

#fahrzeugliste .divTab {
    padding-right: 0;
}

#fahrzeugliste .frontend-card-grid > .cellfahrzeugnebeneinander {
    display: flex;
    float: none;
    margin: 0;
    padding: 0;
    width: auto;
}

#fahrzeugliste .frontend-card-grid > .cellfahrzeugnebeneinander.hide {
    display: none;
}

#fahrzeugliste .frontend-card-grid > .column:not(.cellfahrzeugnebeneinander) {
    display: none;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight {
    background: var(--color-white, #fff);
    border-radius: var(--frontend-panel-radius);
    box-shadow: var(--frontend-panel-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.frontend-station-summary {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(12rem, 1fr) minmax(13rem, 1fr) minmax(18rem, 2fr);
    margin-left: 0;
}

.frontend-station-summary:empty {
    display: none;
}

.frontend-station-summary__item {
    align-items: start;
    background: color-mix(in srgb, var(--color-surface-alt, #efefef) 46%, var(--color-white, #fff));
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-control-radius);
    color: var(--color-text-muted, #666);
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    line-height: 1.4;
    min-width: 0;
    padding: 0.625rem 0.75rem;
}

.frontend-station-summary__item--hours {
    grid-column: 3;
    grid-row: 1;
}

.frontend-station-summary__item--notice {
    grid-column: 1 / -1;
}

.frontend-station-summary__icon {
    color: var(--color-primary, #2671bc);
    line-height: 1.4;
    margin-top: 0.1rem;
    text-align: center;
}

.frontend-station-summary__content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.frontend-station-summary__item b {
    color: #171717;
    display: block;
    margin-bottom: 0.125rem;
}

.frontend-station-summary__station-name {
    color: #171717;
    display: block;
    margin-bottom: 0.125rem;
}

.frontend-station-summary__item p,
.frontend-station-summary__content > div {
    margin: 0;
}

.frontend-station-summary__item--contact .frontend-station-summary__content {
    display: grid;
    row-gap: 0.25rem;
}

.frontend-station-summary__contact-row {
    display: grid;
    gap: 0.125rem;
}

.frontend-station-summary__contact-row b {
    display: block;
    margin: 0;
}

.frontend-station-summary__item--hours .frontend-station-summary__content > div {
    line-height: 1.55;
}

.frontend-station-summary__item--hours .frontend-station-summary__content > b {
    margin-bottom: 0;
}

.frontend-station-summary__item a {
    color: var(--color-primary, #2671bc);
}

@media only screen and (min-width: 768px) {
    .frontend-station-summary:not(:has(> .frontend-station-summary__item--hours)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .frontend-station-summary {
        grid-template-columns: 1fr;
    }

    .frontend-station-summary__item--hours {
        grid-column: 1;
        grid-row: auto;
    }
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .beschriftungheadline {
    align-items: center;
    border-bottom: 1px solid var(--color-surface-alt, #efefef);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 6rem;
    padding: 1rem 1.25rem;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .beschriftungheadline h5,
.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .beschriftungheadline p {
    margin: 0;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .textinhalt,
.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .textinhalt.belegt,
.content-vermietung.sammelvorgang .rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .textinhalt {
    margin-bottom: 0;
    padding: 1.25rem 1.5rem;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .shrinked_text {
    -webkit-line-clamp: 4;
    max-height: 6em;
}

#fahrzeugliste .frontend-card-grid div.columns.textinhalt {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .fahrzeug_selector_buttonfeld,
.content-vermietung.sammelvorgang div.fahrzeug_selector_buttonfeld {
    border-top: 0;
    bottom: auto;
    left: auto;
    margin-top: auto;
    padding: 1rem;
    position: static;
    width: 100%;
}

.rowfahrzeugergebnis .fahrzeug_selector_buttonfeld .buchen_button,
.rowfahrzeugergebnis .fahrzeug_selector_buttonfeld .alternativenanzeige,
.rowfahrzeugergebnis .fahrzeug_selector_buttonfeld .button_anfrage {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    height: 4rem;
    justify-content: center;
    line-height: 1.2;
    margin: 0 auto 1rem;
    white-space: normal;
    width: 80%;
}

.rowfahrzeugergebnis .fahrzeug_selector_buttonfeld .preisanzeige_button {
    display: block;
    margin-top: 0.375rem;
}

#fahrzeugliste .frontend-card-grid .fahrzeug_selector_buttonfeld {
    padding: 1rem;
}

#fahrzeugliste .frontend-card-grid .fahrzeug_selector_buttonfeld .column {
    padding-left: 0;
    padding-right: 0;
}

div.fahrzeug_selector .bildcontent,
div.fahrzeug_selector .bildcontent {
    align-items: center;
    aspect-ratio: 16 / 10;
    background: var(--color-surface-alt, #efefef);
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

div.fahrzeug_selector .bildcontent > img,
div.fahrzeug_selector .bildergalerie > img,
div.fahrzeug_selector .frontend-gallery__slide img {
    height: 100%;
    max-height: none;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.cellfahrzeugnebeneinander .frontend-gallery,
.cellfahrzeugnebeneinander .frontend-gallery__viewport,
.cellfahrzeugnebeneinander .frontend-gallery__track,
.cellfahrzeugnebeneinander .frontend-gallery__slide {
    height: 100%;
    width: 100%;
}

/* Extras und Haftungsbeschraenkungen folgen demselben Kartenraster. */
.hbcontainer > .row,
.frontend-extra-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    max-width: none;
    width: 100%;
}

.hbcontainer > .row::before,
.hbcontainer > .row::after,
.frontend-extra-grid::before,
.frontend-extra-grid::after {
    content: none;
    display: none;
}

.hbcontainer > .row > .column,
.frontend-extra-grid > .artikelauswahl {
    float: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.hbcontainer > .row > .column:empty {
    display: none;
}

.hbcontainer .equalheight,
div.artikelauswahl > .row {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #cacaca);
    border-radius: var(--frontend-panel-radius);
    box-shadow: 0 6px 18px #00000010;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.hbcontainer > .row > .column {
    padding-bottom: 0;
    padding-right: 0;
}

#artikeldiv > .row {
    margin-left: 0;
}

#artikeldiv > #hinweis_keine_artikel,
#artikeldiv > #keine_zusatzartikel {
    flex: 0 0 100%;
    grid-column: 1 / -1;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
}

#artikeldiv:has(> #hinweis_keine_artikel) > .row:not(#hinweis_keine_artikel) {
    display: none;
}

#artikeldiv:has(> #hinweis_keine_artikel) > .artikelauswahl_after {
    display: none;
}

#artikeldiv:has(> #hinweis_keine_artikel),
#artikeldiv:has(> #keine_zusatzartikel) {
    margin-bottom: 0;
}

#artikeldiv > #keine_zusatzartikel {
    margin-bottom: 0;
}

#artikeldiv:has(> #hinweis_keine_artikel) + .column #buttons_step_2,
#artikeldiv:has(> #keine_zusatzartikel) + .column #buttons_step_2 {
    margin-top: var(--frontend-section-gap);
}

#artikeldiv > #hinweis_keine_artikel > .callout {
    margin: 0;
    width: 100%;
}

#artikeldiv .artikelauswahl_large {
    margin-bottom: 0;
}

#artikeldiv .artikelauswahl_large > .row {
    display: flex;
    flex-direction: column;
}

#artikeldiv .artikelauswahl_large .artikel_bezeichnung {
    margin-bottom: 0;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich {
    border-top: 1px solid var(--color-surface-alt, #efefef);
    bottom: auto;
    left: auto;
    margin-top: auto;
    padding: 1rem;
    position: static;
    width: 100%;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich > .row {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) max-content;
    margin: 0;
    max-width: none;
    width: 100%;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich > .row > .columns {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich > .row > .columns:last-child {
    justify-self: end;
}

#artikeldiv .artikelauswahl_large .preisanzeigebereich .switch {
    margin: 0;
}

div.artikelauswahl .frontend-gallery__slide {
    aspect-ratio: 16 / 10;
    background: var(--color-surface-alt, #efefef);
    height: auto;
}

div.artikelauswahl .frontend-gallery__slide img,
#artikeldiv .artikelauswahl_large img {
    height: 100%;
    max-height: none;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

/* Kundendaten und Checkout erhalten kompakte, klar gegliederte Flaechen. */
.frontend-login-primary {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

.frontend-login-primary > .column {
    padding-left: 0;
}

.frontend-login-primary-actions {
    display: flex;
    gap: 0.75rem;
}

.frontend-login-primary-actions .button {
    margin-bottom: 1rem;
}

.frontend-checkout-callout fieldset,
.frontend-customer-callout fieldset {
    background: color-mix(in srgb, var(--color-surface-alt, #efefef) 38%, var(--color-white, #fff));
    border: 1px solid var(--color-border, #cacaca);
    border-radius: 10px;
    margin: 0 0 var(--frontend-section-gap);
    padding: 1.25rem;
}

.frontend-checkout-inputs {
    margin-top: var(--frontend-section-gap) !important;
}

.frontend-summary-callout .frontend-rental-summary-meta {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.frontend-summary-callout .frontend-rental-summary-meta::before,
.frontend-summary-callout .frontend-rental-summary-meta::after {
    content: none;
    display: none;
}

.frontend-summary-callout .frontend-rental-summary-item {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    min-width: 0;
}

.frontend-summary-callout .frontend-rental-summary-value {
    overflow-wrap: anywhere;
    text-align: right;
}

.frontend-summary-callout .frontend-rental-summary-event {
    grid-template-columns: minmax(0, 1fr);
}

.frontend-checkout-callout .frontend-rental-summary-meta {
    background: color-mix(in srgb, var(--color-surface-alt, #efefef) 45%, var(--color-white, #fff));
    border-radius: var(--frontend-control-radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 var(--frontend-section-gap);
    padding: 1rem;
}

.frontend-checkout-callout .frontend-rental-summary-meta::before,
.frontend-checkout-callout .frontend-rental-summary-meta::after {
    content: none;
    display: none;
}

.frontend-checkout-callout .frontend-rental-summary-item {
    min-width: 0;
}

.frontend-checkout-callout .frontend-rental-summary-value {
    line-height: 1.35;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    text-align: left;
}

.frontend-checkout-callout .frontend-rental-summary-event {
    grid-column: 1 / -1;
}

.frontend-checkout-callout .buchungsuebersicht .list_uebersicht {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    padding: 0.375rem 1rem;
}

.frontend-checkout-callout .buchungsuebersicht .list_uebersicht::before,
.frontend-checkout-callout .buchungsuebersicht .list_uebersicht::after {
    content: none;
    display: none;
}

.frontend-checkout-callout .buchungsuebersicht .list_uebersicht > .column {
    float: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.frontend-checkout-callout .list_uebersicht_positionen {
    border-bottom: 1px solid var(--color-surface-alt, #efefef);
}

.frontend-checkout-callout .list_uebersicht_netto {
    margin-top: 0.25rem !important;
    padding-top: 0.625rem !important;
}

.frontend-checkout-callout .list_uebersicht_gesamtbetrag {
    background: color-mix(in srgb, var(--color-primary, #2671bc) 9%, var(--color-white, #fff));
    border-top: 0;
    border-radius: var(--frontend-control-radius);
    margin-top: 0.25rem !important;
    padding: 0.75rem 1rem !important;
}

.frontend-checkout-callout .list_uebersicht_gesamtbetrag .extralarge {
    white-space: nowrap;
}

.frontend-checkout-tax-note {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #2671bc) 7%, var(--color-white, #fff));
    border-radius: var(--frontend-control-radius);
    color: var(--color-text-muted, #666);
    display: flex;
    gap: 0.625rem;
    line-height: 1.45;
    margin-top: 0.25rem;
    padding: 0.875rem 1rem;
}

.frontend-checkout-tax-note .fa-solid {
    color: var(--color-primary, #2671bc);
    margin-top: 0.2em;
}

.frontend-checkout-callout > .row:last-child,
.frontend-customer-callout > .row:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 641px) {
    #fahrzeugliste .frontend-card-grid-cols-2,
    .hbcontainer > .row,
    .frontend-extra-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frontend-checkout-callout .frontend-rental-summary-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 1024px) {
    #fahrzeugliste .frontend-card-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .frontend-checkout-callout .frontend-rental-summary-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:has(#contentbereich #tab_column.large-9) .frontend-footer {
        margin-left: 1.125rem;
        width: calc(75vw - 2.25rem);
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    .frontend-summary-callout {
        font-size: 0.9rem;
    }

    .frontend-summary-callout h3 {
        font-size: 1.1rem;
    }

    .frontend-summary-callout .frontend-rental-summary-item {
        gap: 0.5rem;
    }
}

@media only screen and (max-width: 640px) {
    #tabs > .frontend-step-callout,
    .frontend-summary-callout {
        padding: 1rem;
    }

    .frontend-registration-callout {
        padding: 1rem;
    }

    .frontend-registration-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .frontend-registration-header__icon {
        flex-basis: 2.75rem;
        font-size: 1.1rem;
        height: 2.75rem;
    }

    .frontend-registration-form__surface,
    .frontend-registration-privacy {
        padding: 1rem;
    }

    .frontend-registration-actions .button {
        width: 100%;
    }

    .frontend-login-primary-actions {
        justify-content: flex-start;
    }

    .frontend-station-summary {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    #artikeldiv > .row:has(> .artikelauswahl_compact) {
        grid-template-columns: minmax(0, 1fr);
    }

    #artikeldiv .artikelauswahl_large .preisanzeigebereich .artikel_preis {
        text-align: left;
    }

    #artikeldiv .artikelauswahl_compact > .row {
        align-items: center;
        box-sizing: border-box;
        column-gap: 1rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #artikeldiv .artikelauswahl_compact > .row > .column,
    #artikeldiv .artikelauswahl_compact > .row > .columns {
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #artikeldiv .artikelauswahl_compact > .row > .small-9:not(.artikel_preis),
    #artikeldiv .artikelauswahl_compact > .row > .small-12,
    #artikeldiv .artikelauswahl_compact > .row > .margin-top {
        grid-column: 1 / -1;
        width: auto;
    }

    #artikeldiv .artikelauswahl_compact > .row > .artikel_preis {
        grid-column: 1;
        min-width: 0;
        text-align: left;
        width: auto;
    }

    #artikeldiv .artikelauswahl_compact > .row > .preisanzeigebereich {
        grid-column: 2;
        justify-self: end;
        width: auto;
    }

    #artikeldiv .artikelauswahl_compact .preisanzeigebereich .switch {
        margin: 0;
    }

    .frontend-checkout-callout fieldset {
        padding: 1rem;
    }

    .frontend-checkout-callout .frontend-rental-summary-meta {
        font-size: 0.95rem;
        gap: 0.875rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 0.875rem;
    }

    .frontend-checkout-callout .buchungsuebersicht .list_uebersicht {
        font-size: 0.95rem;
    }

    .frontend-checkout-callout .list_uebersicht_gesamtbetrag .extralarge {
        font-size: 1.25rem;
    }

    .frontend-checkout-tax-note {
        font-size: 0.9rem;
    }

    #tabs_kundendaten_wrapper > .tabs-content > .tabs-panel,
    .frontend-customer-data-form {
        padding: 1rem;
    }

    .frontend-contract-confirmation {
        padding: 1rem;
    }

    .frontend-contract-confirmation__header {
        gap: 0.75rem;
        grid-template-columns: 2.75rem minmax(0, 1fr);
    }

    .frontend-contract-confirmation__header-icon {
        font-size: 1.05rem;
        height: 2.75rem;
        width: 2.75rem;
    }

    .frontend-contract-confirmation__item {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    body.isfrontend .frontend-contract-confirmation__action {
        width: 100%;
    }

    .frontend-customer-bookings-table thead td,
    .frontend-customer-bookings-table tbody td {
        padding: 0.6rem;
    }
}

/* Frontend Night Shift: eigenstaendiger, lokal gespeicherter Darstellungsmodus. */
:root[data-frontend-theme="night"] body.isfrontend,
:root[data-frontend-theme="night"] body.isfrontend .tabs-content,
:root[data-frontend-theme="night"] body.isfrontend .tabs-panel,
:root[data-frontend-theme="night"] body.isfrontend .callout,
:root[data-frontend-theme="night"] body.isfrontend .card,
:root[data-frontend-theme="night"] body.isfrontend .ui-widget-content,
:root[data-frontend-theme="night"] body.isfrontend .ui-dialog,
:root[data-frontend-theme="night"] body.isfrontend .ui-datepicker,
:root[data-frontend-theme="night"] body.isfrontend .ui-timepicker-wrapper,
:root[data-frontend-theme="night"] body.isfrontend .ui-menu,
:root[data-frontend-theme="night"] body.isfrontend .ui-autocomplete {
    background-color: var(--color-white, #111827);
    color: var(--frontend-text, #e5e7eb);
}

:root[data-frontend-theme="night"] body.isfrontend input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
:root[data-frontend-theme="night"] body.isfrontend select,
:root[data-frontend-theme="night"] body.isfrontend textarea {
    background-color: var(--color-white, #111827);
    color: var(--frontend-text, #e5e7eb);
}

:root[data-frontend-theme="night"] body.isfrontend input::placeholder,
:root[data-frontend-theme="night"] body.isfrontend textarea::placeholder {
    color: var(--color-text-muted, #aeb8c6);
    opacity: 1;
}

:root[data-frontend-theme="night"] body.isfrontend input:disabled,
:root[data-frontend-theme="night"] body.isfrontend select:disabled,
:root[data-frontend-theme="night"] body.isfrontend textarea:disabled {
    background-color: var(--color-surface-alt, #1f2937);
    color: var(--color-text-muted, #aeb8c6);
}

:root[data-frontend-theme="night"] body.isfrontend label,
:root[data-frontend-theme="night"] body.isfrontend legend,
:root[data-frontend-theme="night"] body.isfrontend .help-text {
    color: var(--frontend-text, #e5e7eb);
}

:root[data-frontend-theme="night"] body.isfrontend .tabs {
    background: var(--color-white, #111827);
    border-color: var(--color-border, #475569);
}

:root[data-frontend-theme="night"] body.isfrontend .tabs-title > a {
    background: transparent;
    color: var(--color-primary, #2671bc);
}

:root[data-frontend-theme="night"] body.isfrontend .tabs-title > a:hover,
:root[data-frontend-theme="night"] body.isfrontend .tabs-title > a:focus-visible,
:root[data-frontend-theme="night"] body.isfrontend .tabs-title.is-active > a,
:root[data-frontend-theme="night"] body.isfrontend .tabs-title > a[aria-selected="true"] {
    background: var(--color-surface-alt, #1f2937);
    color: var(--color-primary, #2671bc);
}

:root[data-frontend-theme="night"] body.isfrontend hr {
    border-bottom-color: var(--color-border, #475569);
}

:root[data-frontend-theme="night"] body.isfrontend .ui-datepicker-calendar .ui-state-default,
:root[data-frontend-theme="night"] body.isfrontend .ui-timepicker-list li,
:root[data-frontend-theme="night"] body.isfrontend .ui-menu-item-wrapper {
    background: var(--color-white, #111827);
    color: var(--frontend-text, #e5e7eb);
}

:root[data-frontend-theme="night"] body.isfrontend .ui-datepicker-calendar .ui-state-hover,
:root[data-frontend-theme="night"] body.isfrontend .ui-timepicker-list li:hover,
:root[data-frontend-theme="night"] body.isfrontend .ui-timepicker-selected,
:root[data-frontend-theme="night"] body.isfrontend .ui-menu-item-wrapper.ui-state-active {
    background: var(--color-surface-alt, #1f2937);
    color: var(--frontend-text, #e5e7eb);
}

:root[data-frontend-theme="night"] body.isfrontend .DivAccordionClosed h3,
:root[data-frontend-theme="night"] body.isfrontend .ui-accordion-content,
:root[data-frontend-theme="night"] body.isfrontend .DivAccMehrDetails h3,
:root[data-frontend-theme="night"] body.isfrontend #fahrerfeld h3,
:root[data-frontend-theme="night"] body.isfrontend .frontend-station-summary__item b,
:root[data-frontend-theme="night"] body.isfrontend .frontend-station-summary__station-name {
    color: var(--frontend-text, #e5e7eb) !important;
}

:root[data-frontend-theme="night"] body.isfrontend .DivAccMehrDetails h3.ui-accordion-header-collapsed {
    border-bottom-color: var(--color-border, #475569) !important;
}

:root[data-frontend-theme="night"] body.isfrontend .switch-paddle,
:root[data-frontend-theme="night"] body.isfrontend .switch-paddle::after {
    background: var(--color-white, #111827);
    border-color: var(--frontend-text, #e5e7eb);
}

:root[data-frontend-theme="night"] body.isfrontend .frontend-gallery__slide,
:root[data-frontend-theme="night"] body.isfrontend .rowfahrzeugergebnis .cellfahrzeugnebeneinander .equalheight .beschriftungheadline {
    background-color: var(--color-surface-alt, #1f2937);
}

:root[data-frontend-theme="night"] body.isfrontend img.fahrzeug_logo {
    filter: grayscale(1) invert(1) brightness(1.35);
    opacity: 0.9;
}