: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;
    /* 50vw durch 50% ersetzt: vw schliesst die Scrollbar-Breite ein, Prozent nicht.
       Dadurch ragte die Bildspalte um die halbe Scrollbar-Breite (~7-8px) ueber ihre
       Bootstrap-Spalte hinaus und der Angebotsbalken (right:0;width:50%) lag mit seiner
       linken Kante auf dem Bild statt buendig an der Spaltenkante. */
    width: 50%;
    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{
        /* 101: die per margin-top:-50px hochgezogene Icon-Zeile muss ueber der
           Hero-Slideshow (.z-index-100) liegen, aber UNTER dem Angebotsbalken
           (z-index 150) durchscrollen - 999 lag frueher faelschlich darueber. */
        z-index:101;
    }
}

@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 Foto läuft über die Kartenbreite,
   bleibt aber flach – so zeigt es viel von der Vorlage, ohne die halbe
   Bildschirmhöhe zu belegen. Der passende Querzuschnitt kommt aus dem
   <source>-Eintrag im Template. */
@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;
    }
    .profi-card .profi-photo img {
        position: static;
        width: 100%;
        height: 170px;
        object-fit: cover;
        object-position: center 30%;
    }
    .profi-card .profi-body {
        padding: 0;
    }
}

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

/* ===== Angebotsbalken (alle Marken) =====
   Ersetzt den alten schwarz/weissen #stickyButton durch einen Glaseffekt-Balken
   mit zwei Bereichen: Preis+Anfrage links, Beratungstermin rechts. Bewusst ohne
   Border-Radius und buendig mit der Spaltenkante (Kundenwunsch) - die Markenfarbe
   fuer .offer-bar__cta/-consult-btn kommt bei Feinreisen aus Page.ss (--dark-blue),
   sonst greift das neutrale Schwarz hier. */
.offer-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    /* 150: ueber Hero-Slideshow (.z-index-100) und den Overview-Icons (101,
       siehe .overview-item img im Mobile-Block oben), aber unter Popup-Overlay
       (999), Popup (1000, style.css) und Mobilmenue (9999). */
    z-index: 150;
    width: 50%;
    align-items: stretch;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.14);
}

/* Fallback fuer Browser ohne backdrop-filter-Unterstuetzung: solides Weiss
   statt Glaseffekt, damit der Text lesbar bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .offer-bar {
        background: rgba(255, 255, 255, 0.95);
    }
}

.offer-bar.hidden {
    display: none !important;
}

.offer-bar__price {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    /* Zone haelt ihre natuerliche Breite (kein grow): so bekommt die
       Beratungszone den ganzen Restplatz und deren Label bricht ZUERST um -
       das "ab" neben dem Preis bleibt einzeilig, bis wirklich kein Platz ist. */
    flex: 0 1 auto;
    /* Vertikal 1.5rem (doppelt so hoch wie zuvor 0.75rem) fuer mehr Luft im
       Balken; links 1.5rem (24px), damit der Preis nicht an der Kante klebt. */
    padding: 1.5rem 1rem 1.5rem 1.5rem;
    min-width: 0;
}

.offer-bar__price-tag {
    /* Grid statt flex-wrap: ein umbrechender Flex-Container reserviert als
       Eigenbreite die EINZEILIGE Summe aller Items - der Feinreisen-Zusatz
       "p. P. im DZ" (frueher flex-basis:100%) blaehte die Tag-Box so um ~60px
       auf und schob den CTA vom Preis weg. Im Grid ist die Breite
       max(Zeile 1, Zeile 2): "ab" + Preis in Zeile 1, der Zusatz spannt
       darunter (grid-column bei .offer-bar__price-note). */
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    column-gap: 0.35rem;
    row-gap: 0.25rem;
    line-height: 1.1;
    color: #000;
}

.offer-bar__price-tag--action {
    color: #d40000;
}

.offer-bar__price-label {
    font-size: 0.75rem;
}

.offer-bar__price-value {
    font-size: 1.25rem;
    /* Der Preis selbst darf nie intern umbrechen (z. B. "€ 2.399,-"). */
    white-space: nowrap;
}

/* Preiszusatz (nur Feinreisen, "p. P. im DZ"): gleiche Groesse/Anmutung wie
   das "ab"-Label und immer als eigene Zeile unter dem Preis. */
.offer-bar__price-note {
    font-size: 0.75rem;
    color: #000;
    /* Eigene Zeile unter "ab"-Label und Preis (ersetzt flex-basis:100%,
       das die Tag-Breite einzeilig aufgeblaeht hatte - siehe __price-tag). */
    grid-column: 1 / -1;
}

.offer-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

/* Gleiche Hover-Farbe wie der Spalten-Button "Jetzt Angebot anfragen"
   (a.btn-primary:hover in style.css, #444) - Feinreisen ueberschreibt beides
   mit seiner Markenfarbe in Page.ss. */
.offer-bar__cta:hover,
.offer-bar__cta:focus-visible {
    background: #444;
    color: #fff;
}

/* a:focus{color:inherit} aus style.css wuerde den Text nach dem Klick dunkel
   faerben (Maus-Klicks matchen :focus, aber nicht :focus-visible) -
   Normalzustand-Farbe deshalb explizit auch fuer :focus/:active setzen. */
.offer-bar__cta:focus,
.offer-bar__cta:active {
    color: #fff;
}

.offer-bar__consult {
    display: flex;
    /* Zeile statt Spalte: Label links neben dem Button, damit
       .offer-bar__consult-btn auf derselben Hoehe wie .offer-bar__cta liegt.
       flex-wrap: wird der Platz knapp, rutscht das Label zentriert in eine
       eigene Zeile ueber den Button (statt es wie frueher auszublenden) -
       der Balken darf dafuer hoeher werden. */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    row-gap: 0.35rem;
    /* Basis 0 + grow: nimmt den gesamten Restplatz neben der Preiszone ein.
       Kein min-width:0 - die Zone kann so nicht unter die Button-Breite
       schrumpfen (min-width:auto), stattdessen bricht erst das Label um. */
    flex: 1 1 0;
    /* Vertikal 1.5rem: doppelt so hoch wie zuvor 0.75rem (siehe __price). */
    padding: 1.5rem 1rem;
    border-left: 1px solid rgba(0, 0, 0, 0.14);
}

/* Ohne Preis (z. B. Feinreisen-Hotels ohne MinVK, Modifier kommt aus
   T32Page_details.ss): die Beratungszone soll den Restplatz nicht mehr
   aufsaugen und ihren Inhalt weit rechts zentrieren - beide Zonen ruecken
   stattdessen als Gruppe zentriert zusammen, der Trenner (border-left)
   bleibt zwischen CTA und Beratung. Seiten mit Preis (offer-bar--has-price)
   bleiben unveraendert. */
.offer-bar:not(.offer-bar--has-price) {
    justify-content: center;
}

.offer-bar:not(.offer-bar--has-price) .offer-bar__price {
    /* Zentriert wird das grosse Kanten-Padding (24px links) nicht gebraucht. */
    padding-left: 1rem;
}

.offer-bar:not(.offer-bar--has-price) .offer-bar__consult {
    /* Natuerliche Breite statt Restplatz-Grow (siehe .offer-bar__consult). */
    flex: 0 1 auto;
}

.offer-bar__consult-label {
    font-size: 0.75rem;
    color: #000;
    /* Zentriert, falls das Label in eine eigene Zeile umbricht. */
    text-align: center;
}

.offer-bar__consult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: transparent;
    color: #000;
    border: 1.5px solid #000;
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Fuellung im Hover in derselben Farbe wie der CTA-Hover (#444). */
.offer-bar__consult-btn:hover,
.offer-bar__consult-btn:focus-visible {
    background: #444;
    border-color: #444;
    color: #fff;
}

.offer-bar__cta:focus-visible,
.offer-bar__consult-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .offer-bar__cta,
    .offer-bar__consult-btn {
        transition: none;
    }
}

/* Tablet: bei 50% Balkenbreite reicht der Platz nicht fuer beide Zonen
   nebeneinander - die Zonen werden untereinander gestapelt, der Trenner
   wandert dafuer von der linken Kante an die Oberkante der Beratungszone. */
@media (min-width: 769px) and (max-width: 1240px) {
    .offer-bar {
        flex-direction: column;
    }

    /* Gestapelt wirken beide Zonen zentriert ruhiger als linksbuendig/zentriert gemischt.
       Das grosse Links-Padding (24px) wird gestapelt nicht gebraucht. */
    .offer-bar__price {
        justify-content: center;
        padding-left: 1rem;
    }

    /* In Spaltenrichtung wuerde flex-basis 0 die Zonenhoehe kollabieren -
       gestapelt bestimmen die Inhalte die Hoehe. */
    .offer-bar__price,
    .offer-bar__consult {
        flex: 0 0 auto;
    }

    .offer-bar__consult {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.14);
    }
}

/* Mobil: Balken laeuft ueber die gesamte Breite, die Zonen bleiben wie auf
   dem Desktop aufgebaut (Pill-Buttons in Originalgroesse, Label neben dem
   Button), aber untereinander gestapelt. Das safe-area-Padding haelt den
   Balken ueber dem Home-Indicator von iOS Safari (braucht viewport-fit=cover
   im Viewport-Meta, siehe Page.ss). */
@media (max-width: 768px) {
    .offer-bar {
        left: 0;
        width: 100%;
        flex-direction: column;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem);
    }

    /* Zentriert; das seitliche Padding schrumpft auf 0.75rem, damit auf
       schmalen Geraeten (320px) moeglichst viel Platz fuer die Inhalte bleibt. */
    .offer-bar__price {
        justify-content: center;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* In Spaltenrichtung wuerde flex-basis 0 die Zonenhoehe kollabieren -
       gestapelt bestimmen die Inhalte die Hoehe. */
    .offer-bar__price,
    .offer-bar__consult {
        flex: 0 0 auto;
    }

    .offer-bar__consult {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.14);
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}