:root{
    --swiper-theme-color: #000 !important;
}
.swiper-pagination-bullet{
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
}
html,
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.image-col {
    padding: 0;
    min-height: 20vh;
}


 @media screen and (max-width: 768px) {
   
    .fahrzeug.image-col {

        min-height: 31vh;
    }
}


.logo {
    width: 100px;
}

.overview-item {
    height: 3rem;
}

.cities hr,
.cities p {
    margin: 0;
    padding: 0;
}

.info-text {
    padding-left: 2rem;
    padding-right: 2.5rem;
}
.fce_tdm_sec_grey h2,.fce_tdm_sec_day h2{
    font-size:medium;
    color: black;
}
.info-text>p, .fce_tdm_sec_grey p,.fce_tdm_sec_day p,.info-text ul li {
    /*color: black;
    font-size: medium;
    */
    font-size:14px;
}

.image-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.0));
}
.fce_tdb_content_grey table{border:0;width:100%}
.fce_tdb_content_grey table td{padding:7px;border-right:1px solid #b6b6b6}
.fce_tdb_content_grey table td.last_col{border-right:none}
.fce_tdb_content_grey table tr.odd td{color:#5e5e5e}
.fce_tdb_content_grey table tr.even td{/*color:#000e3d;*/color:#000;background:#fff}
.visible-mobile {

    /* only visible on devices with <768 */
    @media screen and (min-width: 768px) {
        display: none;
    }
}

.not-visible-mobile {

    /* only visible on devices with >=768 */
    @media screen and (max-width: 768px) {
        display: none;
    }
}

#pin {
    position: fixed;
    left: 0;
    width: 50vw;
    z-index: 1;
}

.image {
    position: absolute;
    /* This allows the images to overlap each other */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .8s;
}

.image-mobile {
    background: url('assets/images/special-2.jpg') no-repeat center center;
    background-size: cover;
    height: 40vh;
}
.slideshow {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.5s;
}
.slideshow img.active{opacity:1; pointer-events: auto;}

#scrollToShow {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
@media screen and (max-width:768px){
    #pin{width: 100% !important;position:inherit} /* 100vw durch 100% ersetzt – verhindert horizontalen Scroll */
    .slideshow{
        height:80vw;
    }
    .info-text {padding-right: 2rem;}
}

#rightSide {
    margin-left: 50%;
    /* Start from the middle of the screen */
    overflow-y: auto;
     @media screen and (max-width: 768px) {
        width: 100%;
        margin: 0;
    }
}
@media screen and (max-width: 768px) {
    #rightSide {
       overflow-y: initial;
    }
    .overview-item{
        margin-top:-50px;
    }
    .overview-item img{
        z-index:999;
    }
}

@media (min-width: 768px) {
    #rightSide {
        overflow-x: hidden;
     }
}

/* Berater-Karte */
.berater-card {
    background: #fff;
    color: #000;
    font-size: 14px;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.berater-card .berater-top {
    padding: .5rem 1.5rem 1rem;
    text-align: center;
}
.berater-card .berater-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    margin-bottom: 1rem;
}
.berater-card .berater-name {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: #000;
}
.berater-card .berater-position {
    font-size: 0.85rem;
    color: #000;
    margin: 0;
}
.berater-card .berater-description {
    font-size: 14px;
    line-height: 1.5;
    padding: 0 1rem 1.5rem;
    text-align: left;
    flex: 1;
}
.berater-card .berater-description p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Reiseberater oberhalb des Reiseverlaufs ("Ihr Profi für diese Reise") ===== */
.profi-block {
    margin-bottom: 1.9rem;
}
/* stretch, damit das Bild auf die volle Hoehe der Textspalte laeuft und
   unten mit den Kontakt-Buttons abschliesst */
.profi-card {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    background: rgb(250, 250, 250);
    padding: 1.5rem;
    color: #000;
    font-size: 14px;
}
/* Feinreisen nutzt eine abgesetzte Rahmenoptik statt der grauen Fläche */
.profi-card--feinreisen {
    background: #fff;
    border: 2px solid var(--dark-beige);
    border-radius: var(--teaser-radius);
    overflow: hidden;
}
/* Feste Breite, Höhe folgt der Textspalte: das Bild liegt absolut im
   Rahmen, damit es keine eigene Höhe in den Flex-Fluss einbringt.
   Sonst gäbe das hohe Hochformat die Kartenhöhe vor und unter den
   Buttons bliebe Platz frei. */
.profi-card .profi-photo {
    flex: 0 0 180px;
    position: relative;
    align-self: stretch;
}
.profi-card .profi-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: top;
    display: block;
}
/* Einzug oben, damit der Text eine Zeile hinter der Bildkante beginnt.
   Unten ohne Einzug – dort reicht der Innenabstand der Karte. */
.profi-card .profi-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 0 0;
}
.profi-card .profi-name {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
    color: #000;
}
/* Position sitzt dicht unter dem Namen und tritt farblich zurück */
.profi-card .profi-position {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 0.75rem;
}
.profi-card .profi-description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}
.profi-card .profi-description p {
    margin: 0 0 0.5rem;
    font-size: 14px;
    line-height: 1.5;
}
/* letzter Absatz ohne Abstand, damit die Buttons direkt anschliessen */
.profi-card .profi-description p:last-child {
    margin-bottom: 0;
}

/* ===== Kontakt-Buttons (Telefon, E-Mail, Profil) =====
   Dunkle, eckige Boxen mit Icon, direkt unter dem Beschreibungstext */
.profi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* Quadratische Boxen, nur Icon – die Bedeutung steht in aria-label und title */
.profi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: #1a1a1a;
    text-decoration: none;
    transition: background-color .15s ease;
}
.profi-btn:hover,
.profi-btn:focus {
    background: #000;
    color: #fff;
    text-decoration: none;
}
.profi-btn .fa {
    font-size: 18px;
    line-height: 1;
    color: #fff;
}

/* ===== Feinreisen: beige Akzente und abgerundete Ecken =====
   Die Variablen stammen aus dem :root-Block, den Page.ss nur für Subsite 1
   ausgibt – diese Regeln greifen daher ausschließlich bei Feinreisen. */
/* Position der Person ("Head of Product") in Beige statt Grau */
.profi-card--feinreisen .profi-position {
    color: var(--dark-beige);
}
.profi-card--feinreisen .profi-photo img {
    border-radius: var(--standard-radius);
}
.profi-card--feinreisen .profi-btn {
    background: var(--dark-beige);
    border-radius: var(--standard-radius);
}
/* Dunkles Icon statt Weiß: Weiß auf dem Beige käme nur auf 2,1:1 Kontrast
   und wäre kaum zu erkennen */
.profi-card--feinreisen .profi-btn,
.profi-card--feinreisen .profi-btn .fa {
    color: var(--dark-blue2);
}
.profi-card--feinreisen .profi-btn:hover,
.profi-card--feinreisen .profi-btn:focus {
    background: var(--light-beige);
    color: var(--dark-blue2);
}

/* ===== Trennlinie unterhalb des Blocks ===== */
.profi-divider {
    opacity: 1;
    margin-top: 1.9rem;
    margin-bottom: 0;
}

/* ===== Mobil: Foto oben, Text darunter =====
   Bis 767px stapeln sich Bild und Text. Das Bild läuft dabei über die volle
   Breite; die Höhenangaben aus der Desktop-Ansicht müssen zurückgesetzt
   werden, sonst kollabiert das Bild in der Spaltenrichtung */
@media (max-width: 767.98px) {
    .profi-card {
        flex-direction: column;
        gap: 1rem;
    }
    /* gestapelt fliesst das Bild wieder normal mit, die absolute
       Positionierung aus der Desktop-Ansicht wird zurückgenommen */
    .profi-card .profi-photo {
        flex: 0 0 auto;
        width: 100%;
        position: static;
    }
    /* feste Höhe statt max-height: sonst verkleinert der Browser zum Einhalten
       des Seitenverhältnisses auch die Breite und das Bild bliebe schmaler
       als die Karte */
    .profi-card .profi-photo img {
        position: static;
        width: 100%;
        height: 320px;
        object-fit: cover;
        object-position: center 25%;
    }
    .profi-card .profi-body {
        padding: 0;
    }
}

#reisedateils .info-text .owl-stage-outer .owl-item .img-wrapper img {
    min-height: 333px !important;
    object-fit: cover;
}