/* Logo Abstand Header */

.header .logo {padding: 5px 0px;}

/* Header Texte  */

h1, .h1 {font-size: 1.7em;}
h2, .h2 {font-size: 1.6em;}
h3, .h3 {font-size: 1.4em;}
h4, .h4 {font-size: 1.2em;}

/*  Überschriften Events */

.event h1 {padding: 50px 0 20px 0;}


/* Header Grafiken  */

.pbL, .pbL>.bgWrapperInner {
    padding-bottom: 30px !important;
}

.ptL, .ptL>.bgWrapperInner {
    padding-top: 40px !important;
}

/* Abstand Headerbild Mitglied im BGV + weitere Seiten */

.mod_article:not(.fullWidth):not(.fullWidthContent) {
    padding: 50px 20px;
}

/* Innenabstände Textblöcke  */

.pt30 {padding-top: 30px;}
.pt50 {padding-top: 50px;}
.pt70 {padding-top: 70px;}
.pt90 {padding-top: 90px;}
.pb30 {padding-bottom: 30px;}
.pb50 {padding-bottom: 50px;}
.pb70 {padding-bottom: 70px;}
.pb90 {padding-bottom: 90px;}
.pb120 {padding-bottom: 120px;}
.pb150 {padding-bottom: 150px;}


/* Preisbox  */

.priceBox {
    border: 4px #004abd solid;
    background: linear-gradient(#02599C4d, #0000);
    padding: 20px;
	border-radius: 30px;
	box-shadow: 10px 10px 2px 1px rgba(0, 0, 255, 0.2);
}


/* Headerbild rand rund (rr)  */

.rr20 {border-radius: 20px; filter: drop-shadow(0 0 0.75rem #005aa1);}
.rr40 {border-radius: 40px; filter: drop-shadow(0 0 0.75rem #005aa1);}
.rr60 {border-radius: 60px; filter: drop-shadow(0 0 0.75rem #005aa1);}
.rr80 {border-radius: 80px; filter: drop-shadow(0 0 0.75rem #005aa1);}


/* Schatten Überschriften Headerbilder  */

.ts {text-shadow: 3px 4px 2px #005aa1;}



/* Bild zentrieren  */
.bildCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 38%;
}


/* Slider Überschiften 1-3 */

.sliderub1 {
  background: rgb(1, 93, 163);
  color: #fff;
  padding: 5px 35px 10px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
  outline: rgba(255,255,255,.6) solid 2px;
  /* outline-offset: .2em; */
  border-radius: 10px;
  text-shadow: 0 2px 2px cyan;
}

.sliderub2 {
  background: #4b6584;
  color: #fff;
  padding: 20px 30px;
  font-size: 24px;
  opacity: 0.8;
  border-radius: 4px;
}

.sliderub3 {
  background: #4b6584;
  color: #fff;
  padding: 5px 35px 10px;
  font-size: 16px;
  opacity: 0.7;
  border-radius: 10px;
}

/* Boxen Ecken rund  */
.runds {border-radius:20px;}
.rundm {border-radius:40px;}
.rundxl {border-radius:60px;}


/* Referenz  */
.referenz {
	background-color: #d1d8e0;
	border-radius: 20px;
	padding: 10px;	
}


/* Styling für die Führung inkl. Kasse, Warenkorb etc.  */

.event {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #EAEFF7; /* $active */
	width: 86%;
}
.event h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 5px;
    font-size: 110%;
    font-weight: bold;
}
.event .submit:hover {
    background-color: #017192; /* $hover */
}

.mod_calendar table {
    margin-top: 13px;
    margin-bottom: 6px;
    width: 99%;
    border-collapse: collapse;
    font-size: 100%;
}
.mod_calendar table .event td {
    border: 1px solid #D6DDCF;
}
.mod_calendar table .right {
    text-align: right;
}
.mod_calendar table .middle {
    text-align: center;
}
.mod_calendar th {
    width: 14.28%;
    min-width: 0;
    vertical-align: middle;
    text-align: center;
    color: #333; /* $color_1 */
    padding: 4px 8px;
    vertical-align: top;
}
.mod_calendar .days {
    padding-right: 0;
    padding-left: 0;
    vertical-align: middle;
    text-align: center;
    background-color: #ccc; /* $light_gray */
    border: 1px solid #dadada;
}
.mod_calendar .days.selected {
    background-color: #017192 !important; /* $hover */
    border: 1px double #005f7f !important; /* darken($hover, 8%) */
    color: #fff; /* $white */
}
.mod_calendar .days.active.selected:hover {
    background-color: #1a8da0 !important; /* lighten($hover, 8%) */
    border: 1px double #1a8da0 !important; /* lighten($hover, 3%) */
    -moz-transition: 0.6s;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}
.mod_calendar .days.active {
    background-color: #02508d; /* $active */
    border: 1px double #2a8b7f; /* darken($active, 7%) */
}
.mod_calendar .days.active a {
    color: #fff;
    display: block;
}
.mod_calendar .days.active:hover {
    background-color: #4cd8ff; /* lighten($active, 20%) */
    -moz-transition: 0.6s;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}

.mod_locationlist .image_container {
    max-width: 35%;
    top: -36px;
    position: relative;
    float: right;
}
.mod_locationlist .item.image {
    padding-bottom: 0;
}
.mod_contactlist .image_container {
    max-width: 35%;
    top: -36px;
    position: relative;
    float: right;
}

.location_object {
    width: 60%;
}
.contact_object {
    width: 60%;
}

.mod_event_list .month {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background-color: #e8f0fe;
    border-radius: 3px;
    color: #000; 
}

.event_list {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-left: 12px;
    border-bottom: 1px solid #02508d; /* $active */
}
.event_list .item_amount .label {
    display: none;
}
.event_list .item_amount div.value {
    float: none;
    width: auto;
}
.event_list .submit_button {
    display: inline-block;
    margin-left: 5px;
}

.event_important {
    width: 48%;
    margin: 0 1% 5%;
    float: left;
    padding-right: 0;
    padding-left: 0;
    border-bottom: 0;
    display: flex;
}

.mod_event_list.flex {
    margin: 0 -1%;
}

.event_list .info {
    float: left;
    margin-right: 2%;
    width: 40%;
}
.event_list .teaser {
    float: left;
    margin-right: 2%;
    width: 40%;
}
.event_list .price {
    float: left;
    margin-right: 2%;
    margin-right: 0;
    font-weight: bold;
}
.event_list .date {
    color: #ccc; /* $color_5 */
}
.event_list .booking {
    clear: both;
    margin-top: 20px;
}

.event_important .info {
    width: 90%;
    padding-right: 3%;
    padding-left: 3%;
    font-size: 90%;
    line-height: 145%;
    color: #999; /* $color_6 */
}
.event_important .location {
    float: left;
    display: inline;
    margin-right: 6px;
    color: #333; /* $color_1 */
}

.mod_event_related li {
    clear: both;
}

#shortbar .mod_event_cartlink {
    float: left;
    margin-right: 20px;
}
#shortbar .mod_event_cartlink a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}

#shortbar .mod_event_watchlink {
    float: left;
    margin-top: 0;
    margin-right: 20px;
}
#shortbar .mod_event_watchlink a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}

.cart_table span.label {
    margin-right: 5px;
    font-weight: bold;
}
.cart_table .buttons span {
    display: inline-block;
    margin-right: 25px;
}
.cart_table .buttons a {
    display: inline-block;
    padding-top: 30px;
    padding-bottom: 3px;
    /* padding-left: 20px; */
    background-position: left center;
    background-repeat: no-repeat;
	font-weight: bold;
}
.cart_table a.push_to_cart {
    background-image: url("/files/event_manager/cart_put.png");
}
.cart_table a.delete {
    background-image: url("/files/event_manager/delete.png");
}
.cart_table td {
    padding-top: 15px;
    padding-bottom: 5px;
}
.cart_table th {
    padding-top: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #444;
    color: #222;
}

ul.checkout_steps.block {
list-style-type: none;
padding: 0; 
margin: 0; 
display: flex; 
flex-direction: row; 
}

li.step {
	margin-right: 10px;
}

Hier ist der konvertierte CSS-Code aus deinem SCSS-Code. Ich habe die Variablen durch ihre entsprechenden Werte ersetzt und die SCSS-Syntax in CSS umgewandelt:

/* Farben */
:root {
    --color-1: #333;
    --color-4: #a0a0a0;
    --color-5: #ccc;
    --color-6: #999;
    --color-7: #666;
    --color-8: #02518c;
    --color-9: #777;
    --color-15: #222;
    --color-20: #aaa;
    --color-28: #1b1e1c;
    --background-color-1: #ddd;
    --background-color-14: #ccc;
    --border-right-color-1: #ddd;
    --border-bottom-color-1: #ddd;
    --active-bright: #02508d;
    --active-menu: #26a4ca;
    --menu-bg: #e1f8ff;
    --menu-border: #9fc9d6;
    --abstand: 17px;
    --abstandn: -17px;
    --active-hover: #017192;
    --highlight: #f7ec72;
    --inactive: #888;
}

/* Event */
.event {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--active);
}
.event h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 5px;
    font-size: 110%;
    font-weight: bold;
}
.event .submit:hover {
    background-color: var(--hover);
}

/* Mod Calendar */
.mod_calendar table {
    margin-top: 13px;
    margin-bottom: 6px;
    width: 99%;
    border-collapse: collapse;
    font-size: 100%;
}
.mod_calendar .event td {
    border: 1px solid #D6DDCF;
}
.mod_calendar .right {
    text-align: right;
}
.mod_calendar .middle {
    text-align: center;
}
.mod_calendar th {
    width: 14.28%;
    min-width: 0;
    vertical-align: middle;
    text-align: center;
    color: var(--color-1);
    padding: 4px 8px;
    vertical-align: top;
}
.mod_calendar .days {
    padding-right: 0;
    padding-left: 0;
    vertical-align: middle;
    text-align: center;
    background-color: var(--light_gray);
    border: 1px solid #dadada;
}
.mod_calendar .days.selected {
    background-color: var(--hover) !important;
    border: 1px double darken(var(--hover), 8%) !important;
    color: var(--white);
}
.mod_calendar .days.active.selected:hover {
    background-color: lighten(var(--hover), 8%) !important;
    border: 1px double lighten(var(--hover), 3%) !important;
    transition: 0.6s;
}
.mod_calendar .days.active {
    background-color: var(--active);
    border: 1px double darken(var(--active), 7%);
}
.mod_calendar .days.active a {
    color: #fff;
    display: block;
}
.mod_calendar .days.active:hover {
    background-color: lighten(var(--active), 20%);
    transition: 0.6s;
}

/* Mod Location List */
.mod_locationlist .image_container {
    max-width: 35%;
    top: -36px;
    position: relative;
    float: right;
}
.mod_locationlist .item.image {
    padding-bottom: 0;
}

/* Mod Contact List */
.mod_contactlist .image_container {
    max-width: 35%;
    top: -36px;
    position: relative;
    float: right;
}

/* Location and Contact Objects */
.location_object {
    width: 60%;
}
.contact_object {
    width: 60%;
}

/* Mod Event List */
.mod_event_list .month {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 8px 12px;
   /* background-color: var(--active);
    border-radius: 3px; */
    color: #02599c;
    font-weight: bold;
}

/* Event List */
.event_list {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-left: 12px;
    border-bottom: 1px solid var(--active);
}
.event_list .item_amount .label {
    display: none;
}
.event_list .item_amount div.value {
    float: none;
    width: auto;
}
.event_list .submit_button {
    display: inline-block;
    margin-left: 5px;
}

/* Event Important */
.event_important {
    width: 48%;
    margin: 0 1% 5%;
    float: left;
    padding-right: 0;
    padding-left: 0;
    border-bottom: 0;
    display: flex;
}
.mod_event_list.flex {
    margin: 0 -1%;
}
.event_list .info {
    float: left;
    margin-right: 2%;
    width: 40%;
}
.event_list .teaser {
    float: left;
    margin-right: 2%;
    width: 40%;
}
.event_list .price {
    float: left;
    margin-right: 2%;
    font-weight: bold;
}
.event_list .date {
    color: var(--color-5);
}
.event_list .booking {
    clear: both;
    margin-top: 20px;
}

/* Event Important Info */
.event_important .info {
    width: 90%;
    padding-right: 3%;
    padding-left: 3%;
    font-size: 90%;
    line-height: 145%;
    color: var(--color-6);
}
.event_important .location {
    float: left;
    display: inline;
    margin-right: 6px;
    color: var(--color-1);
}

/* Mod Event Related */
.mod_event_related li {
    clear: both;
}

/* Shortbar */
#shortbar .mod_event_cartlink {
    float: left;
    margin-right: 20px;
}
#shortbar .mod_event_cartlink a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}
#shortbar .mod_event_watchlink {
    float: left;
    margin-top: 0;
    margin-right: 20px;
}
#shortbar .mod_event_watchlink a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Cart Table */
.cart_table span.label {
    margin-right: 5px;
    font-weight: bold;
}
.cart_table .buttons span {
    display: inline-block;
    margin-right: 25px;
}
.cart_table .buttons a {
    display: inline-block;
    padding-top: 3px;
}   




/* Styling Layout & CSS Listing Gästeführerseiten */

.font10 {font-size: 10px;}
.font12 {font-size: 12px;}
.font14 {font-size: 14px;}
.font16 {font-size: 16px;}


/* Styling Layout & CSS Listing Detailseite Führung */

/* Allgemeine Container-Stile */
.event.layout_full {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Header-Bild */
.header_image_container {
    width: 100%;
    margin-bottom: 30px;
}

.header_image_container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 400px;
}

.header_image_container .caption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 10px;
}

/* Titel und Untertitel */
.event_header {
    text-align: center;
    margin-bottom: 20px;
}

.event_header h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
}

.event_header .subtitle {
    font-size: 1.3rem;
    color: #666;
    margin-top: 10px;
}

/* Datum und Uhrzeit */
.event_date_time {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 20px;
}

.event_date_time .time {
    color: #666;
}

/* Teaser */
.teaser {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: justify;
}

/* Buchungsformular */
.booking {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.booking h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.event_booking_inside form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.event_booking_inside label {
    font-weight: bold;
    color: #2c3e50;
}

.event_booking_inside input,
.event_booking_inside select,
.event_booking_inside textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.event_booking_inside button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.event_booking_inside button:hover {
    background-color: #2980b9;
}

/* Metadaten */
.event_details .event_meta {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.event_details .event_meta li {
    display: flex;
    margin-bottom: 12px;
    font-size: 1rem;
}

.event_details .event_meta .label {
    font-weight: bold;
    width: 150px;
    color: #2c3e50;
}

.event_details .event_meta .value {
    flex: 1;
}

.event_details .event_meta .value a {
    color: #3498db;
    text-decoration: none;
}

.event_details .event_meta .value a:hover {
    text-decoration: underline;
}

/* Beschreibung */
.event_description h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.event_description p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Downloads */
.enclosure h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.enclosure p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

.enclosure .mime_icon {
    vertical-align: middle;
}

.enclosure a {
    color: #3498db;
    text-decoration: none;
}

.enclosure a:hover {
    text-decoration: underline;
}


/*
Header Hintergrund-Farben
*/

#menu-custom {
    background-color: #e8f0fe !important;
}

.tutor_item {
  padding: 0.6875em 2.5em 0.8125em 1.25em;
  /* border: 1px solid #cad0d8; */
  border-radius: 3px;
	
}


/* Responsive Design */
@media (max-width: 768px) {
    .event.layout_full {
        padding: 15px;
    }

    .event_header h1 {
        font-size: 2rem;
    }

    .event_header .subtitle {
        font-size: 1.1rem;
    }

    .event_date_time {
        font-size: 1rem;
    }

    .event_details .event_meta li {
        flex-direction: column;
    }

    .event_details .event_meta .label {
        width: 100%;
        margin-bottom: 5px;
    }

    .booking {
        padding: 15px;
    }
}