:root {
--grau-1: #171717;
--grau-2: #262626;
--grau-3: #404040;
--grau-4: #525252;
--grau-5: #737373;
--grau-6: #A1A1A1;
--grau-7: #D4D4D4;
--grau-8: #E5E5E5;
--grau-9: #0A0A0A;
--schwarz: #000000;
--weiss: #FFFFFF;
--rot: #FF0000;
--rot05: rgba(255, 0, 0, 0.05);
--rot10: rgba(255, 0, 0, 0.1);
--rot20: rgba(255, 0, 0, 0.2);
--rot25: rgba(255, 0, 0, 0.25);
--rot30: rgba(255, 0, 0, 0.3);
--rot40: rgba(255, 0, 0, 0.4);
--rot50: rgba(255, 0, 0, 0.5);
--rot80: rgba(255, 0, 0, 0.8);
--blau: #2B7FFF;
--blau-2: #8ec5ff;
--gruen: #22C55E;
--gruen-2: #16A34A;
--lila: #162456;
--lila30: rgba(22, 36, 86, 0.3);
--svg-farbe1: #E5E5E5;
/* --svg-farbe2: #737373;*/
--svg-farbe2: #0a0a0a;
}
.agb p {
padding-bottom: 5px;
}
.agb ol {
padding: inherit;
list-style-type: lower-alpha;
}
.agb ol ol {
list-style-type: decimal;
}
.agb ul {
padding: inherit;
}
.agb li {
padding: inherit;
padding-bottom: 5px;
}
/**
* Scandtrack Selection Card Styles
* Wiederverwendbare Styles für interaktive Auswahlkarten
* Updated: 2026-01-26 - Added Inter font-family and consistent font-weights
*/
/* ========================================
GRID CONTAINER
======================================== */
.selection-card-grid {
display: grid;
gap: 1rem;
}
/* ========================================
BASE CARD STYLES
======================================== */
.selection-card {
position: relative;
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid;
transition: all 0.3s ease;
text-align: left;
cursor: pointer;
margin-bottom: 24px;
}
/* ========================================
HOVER EFFECTS
======================================== */
.selection-card:hover {
box-shadow: 0 20px 25px -5px var(--rot10), 0 10px 10px -5px var(--rot05), 0 0 50px var(--rot40), 0 0 80px var(--rot20);
transform: scale(1.02);
}
/* ========================================
CARD STATES
======================================== */
/* Selected State */
.selection-card.selected {
border-color: var(--rot);
background: linear-gradient(to bottom right, var(--rot10), var(--rot05));
box-shadow: 0 10px 15px -3px var(--rot10), 0 4px 6px -2px var(--rot05), 0 0 40px var(--rot40), 0 0 70px var(--rot20);
}
/* Unselected State */
.selection-card.unselected {
border-color: var(--grau-2) !important;
background-color: var(--grau-9) !important;
}
.selection-card.unselected:hover {
border-color: var(--rot50) !important;
}
/* ========================================
BADGE
======================================== */
.selection-card-badge {
position: absolute;
top: 1rem;
right: 4rem;
background-color: var(--rot);
color: white;
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-weight: 500;
font-family: 'Inter', sans-serif;
}
/* ========================================
CONTENT LAYOUT
======================================== */
.selection-card-content {
display: flex;
align-items: flex-start;
gap: 1rem;
width: 100%;
}
/* ========================================
ICON CONTAINER
======================================== */
.selection-card-icon {
padding: 1rem;
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.selection-card-icon.selected {
background-color: var(--rot) !important;
color: white !important;
}
.selection-card-icon.unselected {
background-color: var(--grau-2) !important;
color: var(--grau-6) !important;
}
.selection-card:hover .selection-card-icon.unselected {
background-color: var(--rot20) !important;
color: var(--rot) !important;
}
.selection-card-icon svg {
width: 2rem;
height: 2rem;
}
/* ========================================
TEXT CONTENT
======================================== */
.selection-card-text {
flex: 1;
}
.selection-card-title-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.selection-card-title {
font-size: 1.25rem;
font-weight: 700;
color: white;
font-family: 'Inter', sans-serif;
}
.selection-card-info-icon {
width: 1rem;
height: 1rem;
color: var(--grau-6);
}
.selection-card-description {
color: var(--grau-5);
font-weight: 400;
font-family: 'Inter', sans-serif;
}
/* ========================================
RADIO BUTTON
======================================== */
.selection-card-radio {
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.selection-card-radio.selected {
border-color: var(--rot);
background-color: var(--rot);
}
.selection-card-radio.unselected {
border-color: var(--grau-4);
}
.selection-card:hover .selection-card-radio.unselected {
border-color: var(--rot);
}
.selection-card-radio-dot {
width: 0.75rem;
height: 0.75rem;
background-color: white;
border-radius: 9999px;
}
/* ========================================
DECISION CARD (Alternative Variante)
======================================== */
.decision-card {
position: relative;
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid var(--grau-2);
background-color: var(--grau-9);
transition: all 0.3s ease;
text-align: left;
cursor: pointer;
}
.decision-card:hover {
border-color: var(--rot50);
box-shadow: 0 20px 25px -5px var(--rot10), 0 10px 10px -5px var(--rot05), 0 0 50px var(--rot40), 0 0 80px var(--rot20);
transform: scale(1.02);
}
.decision-card:hover .selection-card-icon.unselected {
background-color: var(--rot20) !important;
color: var(--rot) !important;
}
.decision-card:hover .selection-card-radio.unselected {
border-color: var(--rot);
}
/* ========================================
BUCHUNGHAUPTCONTAINER LINKS Eingabe, Rechts Buchungsübersicht
======================================== */
.booking-layout {
display: grid;
grid-template-columns: 1fr 375px; /* links flexibel, rechts fix */
gap: 16px;
align-items: start;
margin-bottom: 80px;
}
@media (max-width: 960px) { /* md breakpoint */
.booking-layout {
grid-template-columns: 1fr; /* eine Spalte */
grid-template-rows: auto auto; /* Summary unter Main */
}
}
/* ========================================
BUCHUNG CONTAINER
======================================== */
.booking-container {
background-color: var(--grau-1);
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 2rem;
border: 1px solid var(--grau-2);
font-family: 'Inter', sans-serif;
margin-bottom: 1.5rem;
}
/* ========================================
Formatierung Eingabefelder
======================================== */
/*Unterline unter Eingabefelder entfernen*/
.mud-input-underline:before,
.mud-input-underline:after {
display: none;
}
.mud-input-control input,
.mud-input-control textarea {
font-size: 16px;
}
.progresscircular svg circle {
stroke: var(--grau-7);
}
/*AUTOFILL*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--schwarz) inset; /* deine Wunschfarbe */
-webkit-text-fill-color: var(--weiss);
transition: background-color 5000s ease-in-out 0s;
}
input:autofill {
background-color: var(--schwarz) !important;
color: white !important;
}
.required::after {
content: " *";
color: var(--rot);
font-weight: 700;
}
/* Submit Button */
.weiter-button {
width: 100%;
margin-top: 2rem;
padding: 1rem 1.5rem;
background-color: var(--rot25);
color: var(--rot);
border: 1px solid var(--rot40);
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.weiter-button:hover:not(:disabled) {
box-shadow: 0 20px 25px -5px var(--rot20), 0 8px 10px -6px var(--rot20);
transform: scale(1.02);
background-color: var(--rot30);
}
.buildVersion {
text-align: right;
font-size: 0.75rem;
color: var(--grau-5);
}
/* Route Visualization */
.route-visual-container {
display: flex;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
.route-visual {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.route-point {
width: 0.75rem;
height: 0.75rem;
border-radius: 9999px;
}
.route-point-start {
background-color: var(--rot);
}
.route-point-end {
background-color: var(--blau);
}
.route-line {
height: 0.125rem;
width: 3rem;
background-color: var(--grau-3);
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.route-bus-container {
padding: 0.75rem;
background-color: var(--grau-2);
border-radius: 9999px;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.route-bus-icon {
width: 1.5rem;
height: 1.5rem;
color: var(--grau-6);
}
/* Checkout Section */
.checkout-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Checkout Label */
.checkout-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--grau-7);
margin-bottom: 0.75rem;
margin-left: 1rem;
}
/* Textarea Wrapper */
.textarea-wrapper {
position: relative;
}
/* Checkout Textarea */
.checkout-textarea {
width: 100%;
padding: 0.75rem 1rem;
padding-right: 3rem;
border: 1px solid var(--grau-2);
background-color: var(--schwarz);
color: var(--weiss);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: none;
transition: border-color 0.2s ease;
}
.checkout-textarea:focus {
outline: none;
border-color: var(--rot);
}
.checkout-textarea:focus-within {
border-color: var(--rot);
}
.checkout-textarea::placeholder {
color: var(--grau-5);
}
/* Textarea Icon */
.textarea-icon {
position: absolute;
right: 1rem;
top: 1rem;
width: 1.25rem;
height: 1.25rem;
color: var(--grau-5);
pointer-events: none;
}
/* Checkout Hint */
.checkout-hint {
font-size: 0.875rem;
color: var(--grau-5);
margin-top: 0.5rem;
}
/* AGB Section */
.checkout-agb-section {
padding-top: 1rem;
}
/* AGB Toggle Button */
.agb-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background-color: var(--grau-1);
border: 1px solid var(--grau-2);
border-radius: 0.5rem;
transition: background-color 0.2s ease;
cursor: pointer;
text-align: left;
}
.agb-toggle:hover {
background-color: var(--grau-2);
}
.agb-toggle-text {
color: var(--grau-6);
font-size: 0.875rem;
}
.agb-toggle-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--grau-6);
transition: transform 0.3s ease;
}
/* Rotated state for icon when open */
.agb-toggle.active .agb-toggle-icon {
transform: rotate(180deg);
}
/* AGB Content */
.agb-content {
margin-top: 1rem;
background-color: var(--schwarz);
border-radius: 0.75rem;
padding: 1.5rem;
max-height: 16rem;
overflow-y: auto;
border: 1px solid var(--grau-2);
}
.agb-title {
font-weight: 700;
color: var(--weiss);
margin-bottom: 0.75rem;
font-size: 1rem;
}
.agb-subtitle {
font-size: 0.875rem;
color: var(--grau-7);
margin-bottom: 0.75rem;
}
.agb-text {
font-size: 0.875rem;
color: var(--grau-7);
line-height: 1.6;
}
/* AGB Checkbox Wrapper */
.agb-checkbox-wrapper {
margin-top: 1rem;
}
/* AGB Checkbox Text */
.agb-checkbox-text {
font-size: 0.875rem;
color: var(--grau-7);
transition: color 0.2s ease;
}
.agb-link {
color: var(--blau);
text-decoration: none;
}
.agb-link:hover {
text-decoration: underline;
}
/* Submit Button */
.checkout-submit-button {
width: 100%;
margin-top: 2rem;
padding: 1rem 1.5rem;
background-color: var(--rot);
color: var(--weiss);
border: none;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.checkout-submit-button:hover:not(:disabled) {
box-shadow: 0 20px 25px -5px var(--rot50), 0 8px 10px -6px var(--rot50);
transform: scale(1.02);
background-color: var(--rot);
}
.checkout-submit-button:disabled {
color: var(--weiss) !important;
background-color: var(--rot) !important;
opacity: 0.5;
cursor: not-allowed;
transform: scale(1);
box-shadow: none;
}
.submit-icon {
width: 1.5rem;
height: 1.5rem;
margin-right: 10px;
}
.mud-checkbox-false .mud-icon-root {
color: var(--grau-5); /* grau */
}
.mud-button-root.mud-ripple-checkbox {
transition: background-color 0.15s ease, color 0.15s ease;
}
.mud-checkbox-true .mud-icon-root {
color: var(--gruen);
}
.mud-checkbox-true.mud-button-root:hover .mud-icon-root {
color: var(--gruen-2);
}
.mud-checkbox-false .mud-icon-root {
color: var(--weiss) !important;
}
.checkout-textarea textarea {
margin: 0 !important;
padding: 0 !important;
}
/* Header Section */
.thankyou-header {
text-align: center;
margin-bottom: 2rem;
}
.thankyou-checkmark-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.thankyou-checkmark {
width: 3rem;
height: 3rem;
filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(385%) hue-rotate(76deg) brightness(91%) contrast(89%);
}
.thankyou-red-square {
width: 1.25rem;
height: 1.25rem;
background-color: var(--rot);
margin: 0 auto 1rem;
}
.thankyou-title {
font-size: 2.25rem;
font-weight: 500;
margin: 0 0 0.75rem 0;
text-shadow: 1px 1px 4px var(--schwarz);
}
.thankyou-subtitle {
font-size: 1.25rem;
color: var(--blau);
margin: 0;
}
/* Main Card */
.thankyou-card {
background-color: var(--grau-9);
border-radius: 1rem;
box-shadow: 0 10px 15px -3px var(--schwarz);
padding: 2rem;
border: 1px solid var(--grau-2);
}
/* Card Header */
.thankyou-card-header {
text-align: center;
margin-bottom: 2rem;
}
.thankyou-card-title {
font-size: 1.875rem;
font-weight: 700;
margin: 0 0 1rem 0;
}
.thankyou-card-description {
font-size: 1.125rem;
color: var(--grau-6);
margin: 0 0 1.5rem 0;
line-height: 1.6;
}
/* Info Section */
.thankyou-info-section {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.thankyou-info-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
margin-top: 0.125rem;
filter: brightness(0) saturate(100%) invert(18%) sepia(93%) saturate(7498%) hue-rotate(357deg) brightness(103%) contrast(117%);
}
/* Action Buttons */
.thankyou-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
.thankyou-button {
width: 100%;
margin-top: 2rem;
padding: 1rem 1.5rem;
background-color: var(--rot);
color: var(--weiss);
border: none;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.thankyou-button:hover {
box-shadow: 0 20px 25px -5px var(--rot50), 0 8px 10px -6px var(--rot50);
transform: scale(1.02);
background-color: var(--rot);
}
/* Footer */
.thankyou-footer {
text-align: center;
margin-top: 2rem;
font-size: 0.875rem;
}
.thankyou-footer-text {
color: var(--grau-5);
margin: 0.4rem 0 0.4rem 0;
}
.thankyou-footer-contact {
color: var(--grau-5);
font-weight: 500;
margin: 0 0 0.3rem 0;
}
/* Container */
.insurance-container {
margin: 0 auto;
max-width: 100%;
}
/* Card */
.insurance-card {
background-color: var(--grau-9);
border-radius: 1rem;
border: 1px solid var(--grau-2);
overflow: hidden;
}
/* Header */
.insurance-header {
background: linear-gradient(to right, #1C3F6E, #2A5282);
padding: 1.5rem;
}
.insurance-header-content {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.insurance-header-icon {
width: 2rem;
height: 2rem;
filter: brightness(0) invert(1);
}
.insurance-header-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.insurance-header-subtitle {
color: var(--grau-8);
margin: 0;
font-size: 1rem;
}
/* Content */
.insurance-content {
padding: 2rem;
}
/* Benefits List */
.insurance-benefits {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.insurance-benefit-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.insurance-benefit-check {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border: 1px solid var(--gruen);
background-color: var(--grau-9);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 0.125rem;
}
.insurance-check-icon {
width: 1rem;
height: 1rem;
filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(385%) hue-rotate(76deg) brightness(91%) contrast(89%);
}
.insurance-benefit-text {
color: var(--grau-7);
font-size: 1rem;
line-height: 1.5;
}
/* Info Box */
.insurance-info-box {
background-color: var(--grau-2);
border: 1px solid var(--grau-3);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1.5rem;
display: flex;
gap: 0.75rem;
}
.insurance-info-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
margin-top: 0.125rem;
filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(385%) hue-rotate(76deg) brightness(91%) contrast(89%);
}
.insurance-info-content {
font-size: 0.875rem;
}
.insurance-info-title {
font-weight: 500;
margin-bottom: 0.25rem;
color: var(--grau-7);
margin-top: 0;
}
.insurance-info-text {
color: var(--grau-7);
margin: 0;
line-height: 1.5;
}
/* Selection Button */
.insurance-select-button {
width: 100%;
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid var(--grau-2);
background-color: var(--grau-9);
cursor: pointer;
transition: all 0.3s ease;
}
.insurance-select-button:hover {
border-color: var(--rot);
}
.insurance-select-button[data-selected="true"] {
border-color: var(--gruen);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}
.insurance-select-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.insurance-select-left {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0; /* wichtig für Umbruch */
}
.insurance-select-checkbox {
width: 24px;
height: 24px;
min-width: 24px;
border-radius: 50%;
border: 1px solid var(--grau-3);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.insurance-select-button[data-selected="true"] .insurance-select-checkbox {
border-color: var(--gruen);
background-color: var(--grau-9);
}
.insurance-select-check-icon {
width: 1rem;
height: 1rem;
filter: brightness(0) saturate(100%) invert(25%) sepia(7%) saturate(386%) hue-rotate(174deg) brightness(94%) contrast(87%);
transition: all 0.3s ease;
}
.insurance-select-button[data-selected="true"] .insurance-select-check-icon {
filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(385%) hue-rotate(76deg) brightness(91%) contrast(89%);
}
.insurance-select-label {
font-weight: 600;
font-size: 1.125rem;
text-align: left;
/*word-break: break-all;*/
min-width: 0;
overflow-wrap: anywhere;
}
/* Price */
.insurance-select-price {
/*display: flex;
align-items: center;
font-size: 1.25rem;
font-weight: 700;
white-space: nowrap;
*/
flex-shrink: 0;
white-space: nowrap;
}
.insurance-price-icon {
width: 1.5rem;
height: 1.5rem;
filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(386%) hue-rotate(174deg) brightness(94%) contrast(87%);
}
.insurance-price-amount {
font-size: 1.5rem;
font-weight: 700;
}
@media (max-width: 599.98px) {
.insurance-select-content {
flex-direction: column;
align-items: stretch; /* wichtig */
}
.insurance-select-price {
text-align: right; /* rechtsbündig */
width: 100%; /* volle Breite */
}
}
.traveler_headline {
color: var(--grau-5);
}
/**
* Scandtrack Booking Summary Styles
* Buchungsübersicht - Desktop Sticky Sidebar & Mobile Collapsible Bottom Bar
* Font: Inter
*/
/* ========================================
DESKTOP STICKY SIDEBAR
======================================== */
.booking-summary-desktop {
background-color: var(--grau-9);
border: 1px solid var(--gruen);
border-radius: 0.75rem;
overflow: hidden;
}
/* ========================================
HEADER
======================================== */
.booking-summary-header {
background-color: var(--grau-2);
padding: 1rem 1.25rem;
}
.booking-summary-header-content {
display: flex;
align-items: center;
gap: 0.5rem;
}
.booking-summary-header-content svg {
width: 1.25rem;
height: 1.25rem;
color: var(--grau-5);
}
.booking-summary-title {
font-weight: 700;
color: var(--grau-6);
font-size: 1.125rem;
}
/* ========================================
CONTENT AREA
======================================== */
.booking-summary-content {
padding: 1.25rem;
max-height: 24rem;
overflow-y: auto;
background-color: var(--grau-9);
}
/* ========================================
EMPTY STATE
======================================== */
.booking-summary-empty {
text-align: center;
padding: 2rem 0;
}
.booking-summary-empty-icon, .booking-summary-empty svg {
width: 3rem;
height: 3rem;
color: var(--grau-3);
margin: 0 auto 0.75rem;
}
.booking-summary-empty-text {
color: var(--grau-6);
font-size: 0.875rem;
}
.booking-summary-empty-subtext {
color: var(--grau-5);
font-size: 0.75rem;
margin-top: 0.25rem;
}
/* ========================================
ITEMS LIST
======================================== */
.booking-summary-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.booking-summary-items > .booking-item:last-of-type {
border-bottom: none;
}
.booking-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--grau-2);
}
.booking-item-info {
flex: 1;
}
.booking-item-title {
color: var(--grau-7);
font-size: 0.875rem;
font-weight: 500;
margin-right: 5px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.booking-item-prefix {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0; /* wichtig! */
}
.booking-item-text {
flex: 1;
min-width: 0;
word-break: break-word;
}
.booking-item-detail {
color: var(--grau-5);
font-size: 0.75rem;
}
.booking-item-price {
color: var(--grau-6);
font-weight: 700;
font-size: 0.875rem;
}
.booking-item-count {
width: 18px;
display: inline-block;
text-align: right;
}
.booking-item-icon {
width: 10px;
display: inline-block;
}
/* ========================================
TOTAL SECTION
======================================== */
.booking-summary-total {
background-color: var(--schwarz);
padding: 1rem 1.25rem;
border-top: 1px solid var(--grau-2);
}
.booking-total-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.booking-total-label {
color: var(--grau-6);
font-weight: 700;
font-size: 1.125rem;
}
.booking-total-amount {
color: var(--grau-6);
font-weight: 700;
font-size: 1.5rem;
}
@media (max-width: 960px) { /* md breakpoint */
.booking-summary {
margin-top: 55px;
}
.booking-summary-content {
max-height: inherit;
}
}
/* Traveler Row */
.traveler-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background-color: var(--schwarz);
border-radius: 0.75rem;
border: 1px solid var(--grau-2);
}
.traveler-row:not(:last-child) {
margin-bottom: 24px;
}
.traveler-label {
font-weight: 600;
overflow-wrap: break-word; /* bricht lange Wörter, wenn nötig */
hyphens: auto;
}
.traveler-description {
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--grau-5);
}
/* Counter Controls */
.counter-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.counter-button {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
border: 1px solid var(--grau-2);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.counter-button:hover {
border-color: var(--rot);
background-color: var(--rot);
}
.counter-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.counter-value {
width: 3rem;
text-align: center;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
}
/* ========================================
DATE INPUT GROUP
======================================== */
.date-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* ========================================
DATE LABEL
======================================== */
.date-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--grau-5);
margin-left: 1rem;
margin-bottom: 0.25rem;
}
/* ========================================
DATE INPUT WRAPPER
======================================== */
.date-input-wrapper {
position: relative;
width: 100%;
}
/* ========================================
DATE INPUT FIELD
======================================== */
.date-input {
padding: 0.75rem 1rem;
padding-right: 3rem;
border: 1px solid var(--grau-2);
background-color: var(--schwarz);
border-radius: 0.75rem;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.date-input:focus {
border-color: var(--rot);
}
.date-input:hover {
border-color: var(--rot);
}
/* ========================================
CALENDAR ICON
======================================== */
.date-calendar-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
color: var(--grau-5);
cursor: pointer;
pointer-events: auto;
}
.date-calendar-icon:focus {
outline: none;
box-shadow: none;
}
/* ========================================
MUDDatePicker
======================================== */
.mud-dialog {
background-color: transparent;
}
.mud-picker-container {
border: 1px solid var(--grau-2);
border-radius: 0.75rem;
}
.mud-picker-content {
background-color: var(--grau-9) !important;
}
.mud-picker-datepicker-toolbar {
background-color: var(--grau-2) !important;
}
.mud-picker-nav-button-prev, .mud-picker-nav-button-next {
color: var(--weiss);
}
.mud-day-label {
color: var(--weiss) !important;
}
.mud-picker-calendar-day {
color: var(--weiss) !important;
}
.mud-picker-calendar-day:disabled {
color: var(--grau-4) !important;
text-decoration: line-through;
}
.mud-selected {
background-color: var(--gruen) !important;
}
.mud-input .mud-icon-button-label {
display:none;
}
.date-icon-button {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
padding: 0;
color: var(--grau-5);
cursor: pointer;
}
.date-picker-hidden {
position: fixed;
left: -10000px;
top: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.mud-picker-datepicker-toolbar .mud-button-date, .mud-picker-datepicker-toolbar .mud-button-year {
font-size: 1.5rem;
}
.mud-picker-datepicker-toolbar {
display: flex;
flex-direction: row; /* 🔥 eine Zeile */
align-items: center;
width: 100%;
}
/* Datum links */
.mud-picker-datepicker-toolbar .mud-button-date {
order: 1;
}
/* Jahr rechts */
.mud-picker-datepicker-toolbar .mud-button-year {
order: 2;
margin-left: auto; /* 🔥 nach rechts schieben */
}
.mud-picker-datepicker-toolbar {
height: 75px;
}
.mud-picker-month-selected, .mud-picker-year-selected {
color: var(--gruen) !important;
}
/* Form Label */
.label-text {
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: var(--grau-5);
margin-left: 1rem;
margin-bottom: 0.75rem;
}
.select-wrapper {
position: relative;
}
.select-field {
padding: 0.75rem 3rem 0.75rem 1rem;
border: 1px solid var(--grau-2);
background-color: var(--schwarz);
border-radius: 0.75rem;
outline: none;
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
max-width: 100%;
}
.select-field:hover, .select-field:active, .select-field:focus {
border-color: var(--rot);
}
.select-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
color: var(--grau-5);
pointer-events: none;
}
.mud-popover {
background-color: var(--schwarz);
}
.mud-list-item {
color: var(--weiss);
}
.mud-list-item:hover {
background-color: var(--grau-4) !important;
}
.mud-selected-item {
color: var(--weiss) !important;
background-color: var(--grau-4) !important;
}
.select-field.mud-select-open {
border-color: var(--rot) !important;
}
.mud-select .mud-select-input .mud-input-slot {
white-space: inherit;
overflow: inherit;
height: inherit;
line-height: 1.4rem;
}
/**
* Scandtrack Navigation Footer Styles
* Footer-Navigation mit Zurück- und Weiter-Buttons
* Font: Inter
*/
/* ========================================
NAVIGATION FOOTER
======================================== */
.navigation-footer {
background-color: var(--schwarz);
border-top: 1px solid var(--grau-2);
}
.navigation-footer-container {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1280px;
width: 100%;
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 600px) {
.navigation-footer-container {
padding-left: 24px;
padding-right: 24px;
}
}
.mud-toolbar {
padding-left: 0;
padding-right: 0;
}
/* ========================================
NAVIGATION BUTTONS
======================================== */
.nav-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 0.5rem;
}
/* ========================================
ZURÜCK BUTTON
======================================== */
.nav-button-back {
background-color: transparent;
color: #A1A1A1;
padding: 0.75rem 1.5rem;
}
.nav-button-back:hover {
color: var(--weiss);
}
/* ========================================
WEITER BUTTON
======================================== */
.nav-button-next {
background-color: var(--rot);
color: var(--weiss);
padding: 0.75rem 2rem;
border-radius: 0.5rem;
}
.nav-button-next:hover {
background-color: var(--rot);
box-shadow: 0 10px 15px -3px var(--rot10), 0 4px 6px -2px var(--rot05), 0 0 30px var(--rot50);
transform: scale(1.05);
}
.nav-button-next:active {
transform: scale(1.02);
}
/* ========================================
BUTTON ELEMENTS
======================================== */
.nav-button-icon {
width: 1.25rem;
height: 1.25rem;
}
.nav-button-text {
font-weight: 500;
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-270 {
transform: rotate(270deg);
}
/* Header Container */
.scandtrack-header {
background-color: var(--schwarz);
color: var(--weiss);
}
.scandtrack-border {
}
/* Logo Container */
.scandtrack-header-logo {
width: 8rem; /* 128px */
margin-top: 15px;
}
/**
* Scandtrack Info-Box Styles
* Informationsbox mit blauem Hintergrund und rotem Border
*/
/* ========================================
INFO-BOX CONTAINER
======================================== */
.info-box {
padding: 1rem;
background-color: var(--lila30);
border: 1px solid var(--rot50);
border-radius: 0.5rem;
display: flex;
gap: 0.75rem;
font-family: 'Inter', sans-serif;
margin-top: 20px;
}
/* ========================================
INFO ICON
======================================== */
.info-box-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--grau-5);
flex-shrink: 0;
margin-top: 0.125rem;
}
/* ========================================
TEXT CONTENT
======================================== */
.info-box-content {
font-size: 0.875rem;
color: var(--blau-2);
}
.info-box-title {
font-weight: 700;
}
.info-box-text {
line-height: 1.5;
margin-top: 1.5rem;
}
.info-box-text ul {
margin-left: 1rem;
}
/* Input Wrapper (for icon positioning) */
.input-wrapper {
position: relative;
}
/* Form Input */
.form-input {
width: 100%;
padding: 0.75rem 1rem;
padding-right: 3rem;
border: 1px solid #262626;
background-color: var(--schwarz);
color: var(--weiss);
border-radius: 0.75rem;
font-size: 1rem;
transition: border-color 0.2s ease;
}
.form-input:focus {
border-color: var(--rot);
}
.form-input:hover {
border-color: var(--rot);
}
/* Input Icon */
.input-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
color: var(--grau-5);
pointer-events: none;
transition: color 0.2s ease;
}
/* MudBlazor-Error/Helper-Bereich für dieses Field ausblenden */
.input-hide-error .mud-input-helper-text,
.input-hide-error .mud-input-control-helper-container,
.input-hide-error .mud-input-helper {
display: none !important;
}
/* Eigene Fehlermeldung unter dem Rahmen */
.input-field-error {
margin-top: 6px;
color: var(--rot);
font-size: 12px;
}
/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
:root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
font-family: InterVariable;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}
/* Progress Container */
.scandtrack-progress-border {
border-bottom: 1px solid var(--grau-2);
border-top: 1px solid var(--grau-2);
}
.scandtrack-progress-container {
padding: 1rem 0; /* 16px 24px */
}
/* Step Counter Header */
.scandtrack-progress-header {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
margin-bottom: 1.5rem; /* 12px */
}
.scandtrack-progress-step-text {
font-size: 0.875rem; /* 14px */
font-weight: 500;
color: var(--weiss);
}
.scandtrack-progress-separator {
font-size: 0.875rem; /* 14px */
color: var(--grau-5);
}
.scandtrack-progress-step-title {
font-size: 0.875rem; /* 14px */
color: var(--grau-5);
}
/* Mobile Progress Bar */
.scandtrack-progress-bar-mobile {
position: relative;
height: 0.5rem; /* 8px */
background-color: var(--grau-2);
height: 0.25rem; /* 8px */
border-radius: 9999px;
overflow: hidden;
display: block;
}
.scandtrack-progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--gruen);
transition: width 500ms ease-in-out;
}
/* Desktop Step Indicators */
.scandtrack-progress-steps-desktop {
display: flex;
align-items: center;
width: 100%;
}
/* Step Wrapper */
.scandtrack-progress-step-wrapper {
display: flex;
align-items: center;
flex: 1; /* alle 5 Steps gleich breit */
min-width: 0;
}
/* Step Button */
.scandtrack-progress-step-button {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
}
.scandtrack-progress-step-button:disabled {
cursor: default;
}
.scandtrack-progress-step-button:not(:disabled):hover .scandtrack-progress-step-label {
color: var(--rot80);
transition: all 300ms ease;
}
.scandtrack-progress-step-button:not(:disabled):hover .scandtrack-progress-step-circle {
color: var(--rot80);
border-color: var(--rot80);
transition: all 300ms ease;
}
.scandtrack-progress-step-button:not(:disabled):hover .scandtrack-progress-step-label-completed {
color: var(--gruen-2);
transition: all 300ms ease;
}
.scandtrack-progress-step-button:not(:disabled):hover .scandtrack-progress-step-completed {
color: var(--gruen-2);
border-color: var(--gruen-2);
transition: all 300ms ease;
}
/* Step Circle */
.scandtrack-progress-step-circle {
width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
border-style: solid;
background-color: transparent;
transition: all 300ms ease;
}
/* Current Step Circle */
.scandtrack-progress-step-current {
border-color: var(--rot);
color: var(--rot);
transform: scale(1.1);
}
/* Upcoming Step Circle */
.scandtrack-progress-step-upcoming {
border-color: var(--grau-5);
color: var(--grau-5);
}
/* Completed Step Circle */
.scandtrack-progress-step-completed {
border-color: var(--gruen);
color: var(--gruen);
}
/* Step Number */
.scandtrack-progress-step-number {
font-size: 0.875rem; /* 14px */
font-weight: 600;
}
/* Check Icon */
.scandtrack-progress-check-icon {
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
}
/* Step Label */
.scandtrack-progress-step-label {
font-size: 0.75rem; /* 12px */
margin-top: 0.5rem; /* 8px */
text-align: center;
max-width: 5rem; /* 80px */
}
.scandtrack-progress-step-label-current {
color: var(--rot);
font-weight: 600;
}
.scandtrack-progress-step-label-upcoming {
color: var(--grau-4);
}
.scandtrack-progress-step-label-completed {
color: var(--gruen);
font-weight: 500;
}
/* Progress Connector Line */
.scandtrack-progress-connector {
flex: 1 1 auto;
height: 0.125rem;
margin-left: 4rem;
margin-right: 4rem;
margin-top: -1.5rem;
}
/* Letzter Step: keine Linie nach rechts */
.scandtrack-progress-step-wrapper:last-child .scandtrack-progress-connector {
display: none;
}
/* Letzter Step: nimmt nur so viel Platz wie sein Button braucht */
.scandtrack-progress-step-wrapper:last-child {
flex: 0 0 auto;
}
.scandtrack-progress-connector-upcoming, .scandtrack-progress-connector-current {
background-color: var(--grau-3);
}
.scandtrack-progress-connector-completed {
background-color: var(--gruen);
}
/* Step Header Container */
.scandtrack-step-header {
text-align: center;
margin-bottom: 2rem; /* 32px */
margin-top: 1.5rem;
}
/* Rotes Quadrat */
.scandtrack-step-header-square {
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
background-color: #FF0000;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem; /* 16px */
}
/* Haupttitel */
.scandtrack-step-header-title {
font-size: 1.875rem; /* 30px */
font-weight: 700;
color: #ffffff;
margin-bottom: 0.75rem; /* 12px */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}
/* Responsive Typography für größere Bildschirme */
@media (min-width: 768px) {
.scandtrack-step-header-title {
font-size: 2.25rem; /* 36px */
}
}
/* Untertitel */
.scandtrack-step-header-subtitle {
color: #2B7FFF;
font-size: 1rem; /* 16px */
font-weight: 400;
margin: 0;
}
/* Rental Card Container */
.rental-card {
position: relative;
background-color: #0a0a0a;
border-radius: 0.75rem;
border: 1px solid #262626;
padding: 1.5rem;
}
/* Badge (oben rechts) */
.rental-badge {
position: absolute;
top: 1rem;
right: 1rem;
background-color: #FF0000;
color: #ffffff;
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-weight: 500;
}
/* Selected Checkmark (oben links) */
.rental-selected {
position: absolute;
top: 1rem;
left: 1rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 0.25rem;
border: 1px solid #22c55e;
display: flex;
align-items: center;
justify-content: center;
}
.rental-checkmark {
width: 0.75rem;
height: 0.75rem;
color: #22c55e;
}
/* Icon Container */
.rental-icon-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
padding-top: 0.5rem;
}
.rental-icon-container svg {
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.rental-icon {
width: 3rem;
height: 3rem;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* Content Section */
.rental-content {
padding-top: 1.5rem;
}
/* Wenn kein Icon vorhanden */
.rental-card:not(:has(.rental-icon-container)) .rental-content {
padding-top: 1.5rem;
}
/* Title */
.rental-title {
font-size: 1.125rem;
font-weight: 700;
color: #ffffff;
text-align: center;
margin-bottom: 0.5rem;
}
/* Description */
.rental-description {
font-size: 0.875rem;
color: #737373;
text-align: center;
margin-bottom: 1rem;
}
/* Price */
.rental-price {
text-align: center;
margin-bottom: 1rem;
}
.rental-price-text {
font-size: 1.25rem;
font-weight: 500;
color: #2B7FFF;
}
/* Counter Controls */
.rental-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
/* Counter Buttons */
.rental-button {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.rental-button-minus, .rental-button-plus {
background-color: #525252;
color: #ffffff;
}
.rental-button-minus:hover:not(:disabled), .rental-button-plus:hover:not(:disabled) {
background-color: #FF0000;
}
.rental-button-minus:disabled, .rental-button-plus:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.rental-button svg {
width: 1rem;
height: 1rem;
}
/* Quantity Display */
.rental-quantity {
width: 3rem;
text-align: center;
font-size: 1.25rem;
font-weight: 700;
color: #ffffff;
}
/* Grid Layout für mehrere Karten */
.rental-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 64rem;
margin: 0 auto;
}