: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) und der Navbar (200, siehe Navbar-Stapelung unten)
           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;
}

/* ===== Navbar-Stapelung ===== */
/* Navbar ueber Icon-Zeile (101) und Angebotsbalken (150): die Utility-Klasse
   z-index-100 (Page.ss) lag gleichauf mit der Hero-Slideshow und UNTER den
   Overview-Icons - beim Scrollen schoben sich die Icons ueber die Navbar.
   Ueberschreiben klappt ohne Bundle-Rebuild, weil details2.css in Page.ss
   NACH dist/bundle.css eingebunden ist (gleiche Spezifitaet, spaetere Quelle
   gewinnt). Gilt nur auf Detailseiten (details2.css wird in Page.ss nur bei
   $Object/RequestPage/KatalogPage/DividedPage geladen) - genau dort gibt es
   die Icon-Zeile; andere Seiten behalten die 100 aus der Utility-Klasse.
   Mobilmenue (999/9999) und Popups (999/1000) bleiben oben. */
.navbar {
    z-index: 200;
}

/* ===== Angebotsbalken (alle Marken) =====
   Ersetzt den alten schwarz/weissen #stickyButton durch einen Glaseffekt-Balken
   mit zwei Bereichen: Preis+Anfrage links, Beratungstermin rechts (beide Buttons
   auf einer Linie, ohne Trennlinie und ohne Zusatz-Label - Kundenwunsch Alex,
   21.08.). 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.
   Geometrie: der Balken ist auf JEDER Breite EINE Zeile (Kundenwunsch: kein
   Stapeln - Preis-Tag, Anfrage-Button und Beratungs-Button nebeneinander,
   alle Pillen auf einer Linie). Ab Desktop (>=1301px) zwei symmetrische
   Zwillings-Zonen (gleiche Breite, gleiche Aussenkanten, Inhalt jeweils
   zentriert). Bis 1300px haelt der rechts verankerte Balken min-width:50%;
   der Inhalt zentriert als Gruppe. Der Balken darf dabei NICHT ueber die
   50%-Marke nach links in die Bildspalte wachsen (Kundenwunsch) - die
   Groessenstufen unten sind deshalb so bemessen, dass der Inhalt (worst
   case: Feinreisen mit Preis + "p. P. im DZ") auf jeder Breite in die
   rechte Haelfte passt; das Ventil des 1300er-Blocks bleibt nur als
   Sicherheitsnetz stehen.
   Groessenstaffelung: Desktop >1500 volle Groesse, 1441-1500 eine Stufe
   kleiner, 1301-1440 noch eine Stufe (damit Preis+CTA einzeilig in die
   halbe Zone passen), 1205-1300 15px-Buttons, 1050-1204 13px, 900-1049
   11px, 769-899 9px, <=768 fluide Stufe (Balken volle Breite, Buttons
   8-14px per 2.4vw-Klemme - maximal passende Groesse auf jeder Breite).
   Volle Button-Labels auf ALLEN Breiten (Kundenwunsch -
   .offer-bar__label-prefix wird nirgends mehr ausgeblendet). */
.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 Navbar (200,
       siehe oben), Popup-Overlay (999), Popup (1000, style.css) und
       Mobilmenue (9999). */
    z-index: 150;
    width: 50%;
    align-items: stretch;
    /* Symmetrische Aussenkanten (Kundenwunsch, 2rem beidseitig); die
       1.5rem-Luecke trennt die Zwillings-Zonen auf Desktop (>=1301px). */
    padding: 0 2rem;
    column-gap: 1.5rem;
    /* Glasiger als die urspruenglichen 0.72 (Kundenwunsch "weniger weiss");
       blur eine Stufe hoeher, damit der Text auf dem transparenteren Glas
       lesbar bleibt. */
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) 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;
    /* Linke Zwillings-Zone (Desktop): waechst wie die Beratungszone von
       Basis 0 - beide Zonen teilen sich so exakt 50/50. Preis+CTA als Gruppe
       mittig (Kundenwunsch Symmetrie); bis 1300px nimmt die Zone nur ihre
       natuerliche Breite (siehe 1300er-Block), die Reihen-Anordnung
       Tag-neben-CTA bleibt ueberall erhalten. */
    justify-content: center;
    flex: 1 1 0;
    /* Ventil statt Stapeln: passt die einzeilige Kombination Preis+CTA nicht
       mehr in die Haelfte (schmale Laptops), nimmt die Zone nur ihre
       natuerliche Breite und das Beratungsband weicht - kein Ueberlappen. */
    min-width: max-content;
    /* Nur vertikal - die horizontalen Kanten setzt das Container-Padding. */
    padding: 1.5rem 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;
    /* Nur noch der Button in der Zone (das Label "Lieber persoenlich?" ist
       ersatzlos gestrichen, Kundenwunsch) - Pille zentriert im rechten
       Spaltenband, also mittig unter dem Spalten-CTA "Jetzt Angebot anfragen".
       Kein Trenner mehr zwischen den Zonen (ebenfalls Kundenwunsch). */
    align-items: center;
    justify-content: center;
    /* Rechtes Spaltenband (50/50 mit der Preiszone, s. o.); min-width:0
       laesst das Band nachgeben, wenn das Preis-Ventil Platz braucht. */
    flex: 1 1 0;
    min-width: 0;
    /* Nur vertikal - die horizontalen Kanten setzt das Container-Padding. */
    padding: 1.5rem 0;
}

/* 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. Seiten mit Preis
   (offer-bar--has-price) bleiben unveraendert. */
.offer-bar:not(.offer-bar--has-price) {
    justify-content: center;
}

/* Nur Desktop/Laptop: beide Zonen auf natuerliche Breite, damit die Gruppe
   im Container zentriert. Unterhalb 1301px zentriert der 1300er-Block
   ohnehin beide Zonen als Gruppe, auch ohne Preis. */
@media (min-width: 1301px) {
    .offer-bar:not(.offer-bar--has-price) .offer-bar__price,
    .offer-bar:not(.offer-bar--has-price) .offer-bar__consult {
        flex: 0 1 auto;
    }
}

.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;
}

/* Tap-Target-Klemme: erlaubt es den kleineren Breakpoints, Padding/Schrift
   zu reduzieren, ohne dass die Buttons unter die klickfreundliche Groesse
   fallen. Gestaffelt: Desktop 44px (2.75rem, real 45px), Laptop/Tablet 42px,
   Mobil 36px, schmale Phones 32px - Overrides in den Media-Blocks unten. */
.offer-bar__cta,
.offer-bar__consult-btn {
    min-height: 2.75rem;
}

/* Label-Woerter "Jetzt" / "Persoenlicher" (T32Page_details.ss): auf allen
   Breiten sichtbar (Kundenwunsch: voller Wortlaut, keine gekuerzten
   Labels). Der Wortabstand kommt aus margin-right, weil die
   inline-flex-Buttons ein Leerzeichen zwischen den Flex-Items (Span und
   Textknoten) verschlucken wuerden. */
.offer-bar__label-prefix {
    margin-right: 0.28em;
}

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

/* Laptop-Stufe 1 (1441-1500px): ohne das gestrichene Label passen beide
   Buttons auf eine Linie, aber die Zonen werden knapp - Schrift/Padding
   schrumpfen eine Stufe (Buttons 15px/42px, Zonen-Padding 1rem statt
   1.5rem). Grosse Desktops (>1500px) behalten die volle Groesse. */
@media (min-width: 1441px) and (max-width: 1500px) {
    .offer-bar__price {
        padding: 1rem 0;
        gap: 0.75rem;
    }

    .offer-bar__consult {
        padding: 1rem 0;
    }

    .offer-bar__cta {
        font-size: 0.9375rem;
        padding: 0.5rem 1rem;
        min-height: 2.625rem;
    }

    .offer-bar__consult-btn {
        font-size: 0.9375rem;
        padding: 0.45rem 0.95rem;
        min-height: 2.625rem;
    }
}

/* Laptop-Stufe 2 (1301-1440px): noch eine Stufe kleiner (Buttons 14px/40px,
   Preis 18px), damit Preis+CTA einzeilig in die halbe Zwillings-Zone passen
   und beide Zonen wirklich gleich breit bleiben (das min-width-Ventil der
   Preiszone muss so praktisch nie eingreifen). */
@media (min-width: 1301px) and (max-width: 1440px) {
    .offer-bar__price {
        padding: 1rem 0;
        gap: 0.35rem;
    }

    .offer-bar__price-value {
        font-size: 1.125rem;
    }

    .offer-bar__consult {
        padding: 1rem 0;
    }

    .offer-bar__cta {
        font-size: 0.875rem;
        padding: 0.4rem 0.85rem;
        min-height: 2.5rem;
    }

    .offer-bar__consult-btn {
        font-size: 0.875rem;
        padding: 0.4rem 0.85rem;
        min-height: 2.5rem;
    }
}

/* Tablet + Mobil (<=1300px, gemeinsame Anordnung, Kundenwunsch): weiterhin
   EINE Zeile - Preis-Tag NEBEN dem Anfrage-Button, daneben der
   Beratungs-Button, alle Pillen auf einer Linie (kein Stapeln). Ventil:
   right:0 + width:auto laesst den rechts verankerten Balken bei Platzbedarf
   nach LINKS ueber die 50%-Marke hinauswachsen, min-width haelt die
   50%-Optik, solange der Inhalt hineinpasst. Beide Zonen nehmen nur ihre
   natuerliche Breite und zentrieren als Gruppe - dadurch verhalten sich
   Seiten mit und ohne Preis identisch. white-space:nowrap aus den
   Basisregeln bleibt aktiv, die Groessenstufen unten sorgen dafuer, dass
   die Zeile trotzdem passt. */
@media (max-width: 1300px) {
    .offer-bar {
        width: auto;
        min-width: 50%;
        /* Nicht 100vw: das schluege die Scrollbar-Breite mit drauf und
           schoebe die linke Kante aus dem Sichtfenster. */
        max-width: 100%;
        justify-content: center;
        column-gap: 1rem;
    }

    /* Natuerliche Breite statt 50/50-Grow, nie quetschen; das
       Vertikal-Padding wandert auf den Balken (eine Zeile = eine Box). */
    .offer-bar__price,
    .offer-bar__consult {
        flex: 0 0 auto;
        padding: 0;
    }
}

/* Tablet-Groessenstufe 1 (1205-1300px): Buttons 15px/42px, Preis eine Stufe
   kleiner (18px, wie die 1301-1440er-Nachbarstufe), kompaktes
   Balken-Padding. Ab 1205px passt der Zeileninhalt (worst case Feinreisen
   mit Preis + "p. P. im DZ": ~602px) in die halbe Viewport-Breite -
   darunter uebernehmen die kleineren Stufen, damit der Balken nie ueber
   die 50%-Marke waechst. */
@media (min-width: 1205px) and (max-width: 1300px) {
    .offer-bar {
        padding: 0.6rem 1.5rem;
    }

    .offer-bar__price {
        gap: 0.75rem;
    }

    .offer-bar__price-value {
        font-size: 1.125rem;
    }

    .offer-bar__cta {
        font-size: 0.9375rem;
        padding: 0.5rem 1rem;
        min-height: 2.625rem;
    }

    .offer-bar__consult-btn {
        font-size: 0.9375rem;
        padding: 0.45rem 0.95rem;
        min-height: 2.625rem;
    }
}

/* Tablet-Groessenstufe 2 (1050-1204px): Buttons 13px/38px, Preis 16px.
   Budget = halbe Viewport-Breite (525px bei 1050px); der Zeileninhalt mit
   vollen Labels braucht bei 13px ~525px (worst case Feinreisen mit Preis
   und "p. P. im DZ") - passt exakt, headless nachgemessen. */
@media (min-width: 1050px) and (max-width: 1204px) {
    .offer-bar {
        padding: 0.55rem 1.1rem;
        column-gap: 0.85rem;
    }

    .offer-bar__price {
        gap: 0.5rem;
    }

    .offer-bar__price-value {
        font-size: 1rem;
    }

    .offer-bar__cta {
        font-size: 0.8125rem;
        padding: 0.4rem 0.85rem;
        min-height: 2.375rem;
    }

    .offer-bar__consult-btn {
        font-size: 0.8125rem;
        padding: 0.4rem 0.85rem;
        min-height: 2.375rem;
    }
}

/* Tablet-Groessenstufe 3 (900-1049px): Buttons 11px/36px (wie Mobil, aber
   mit vollen Labels), Preis 14px, Beschriftungen 10px. Budget 450px bei
   900px, Inhalt ~450px - passt, headless nachgemessen. */
@media (min-width: 900px) and (max-width: 1049px) {
    .offer-bar {
        padding: 0.5rem 1rem;
        column-gap: 0.75rem;
    }

    .offer-bar__price {
        gap: 0.45rem;
    }

    .offer-bar__price-value {
        font-size: 0.875rem;
    }

    .offer-bar__price-label,
    .offer-bar__price-note {
        font-size: 0.625rem;
    }

    .offer-bar__cta,
    .offer-bar__consult-btn {
        font-size: 0.6875rem;
        padding: 0.3rem 0.6rem;
        min-height: 2.25rem;
    }
}

/* Tablet-Groessenstufe 4 (769-899px): kleinste Tablet-Stufe mit vollen
   Labels (Kundenwunsch: Wortlaut bleibt komplett, dafuer 9px-Buttons und
   32px Tap-Hoehe - bewusst unter der Tap-Empfehlung wie die 380er-Stufe).
   Budget 384.5px bei 769px, Inhalt ~361px - passt mit Reserve, headless
   nachgemessen. */
@media (min-width: 769px) and (max-width: 899px) {
    .offer-bar {
        padding: 0.45rem 0.75rem;
        column-gap: 0.6rem;
    }

    .offer-bar__price {
        gap: 0.4rem;
    }

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

    .offer-bar__price-label,
    .offer-bar__price-note {
        font-size: 0.5625rem;
    }

    .offer-bar__cta,
    .offer-bar__consult-btn {
        font-size: 0.5625rem;
        padding: 0.25rem 0.5rem;
        min-height: 2rem;
    }
}

/* Mobil: Balken laeuft ueber die gesamte Breite, weiterhin EINE Zeile
   (Preis-Tag, Anfrage-Button und Beratungs-Button nebeneinander) mit
   vollen Button-Labels (Kundenwunsch: Wortlaut bleibt komplett).
   FLUIDE Groesse statt fester Stufen: Budget = volle Viewport-Breite,
   und die maximal passende Schrift waechst kontinuierlich mit -
   headless kalibriert braucht die Zeile (worst case Feinreisen mit
   Preis + "p. P. im DZ") ~293px bei 8px-Buttons plus ~40px je
   zusaetzlichem Font-Pixel. Die 2.4vw-Klemme bleibt damit auf jeder
   Breite unter dem Budget: 8px-Untergrenze fuer 320er-Displays,
   ~9px bei 375px, ~12px bei 500px, 14px-Deckel (Kundenwunsch) ab
   ~583px. Button-Padding in em, damit die Pillen mit der Schrift
   mitwachsen. 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% ueberstimmen das Ventil des 1300er-Blocks -
           auf Mobil laeuft der Balken immer ueber die volle Breite. */
        left: 0;
        width: 100%;
        /* Bewusst schmale, symmetrische Aussenkanten (Kundenwunsch:
           moeglichst viel Breite fuer Text und Buttons). */
        padding: 0.3rem 0.35rem;
        /* Muss NACH der padding-Kurzform stehen: die safe-area ADDIERT sich
           zur Unterkante, damit der Balken ueber dem Home-Indicator von
           iOS Safari sitzt (viewport-fit=cover, s. Blockkommentar). */
        padding-bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px));
        column-gap: 0.35rem;
    }

    /* Kleiner Abstand zwischen Preis-Tag und Anfrage-Button. */
    .offer-bar__price {
        gap: 0.2rem;
    }

    /* Grid im Preis-Tag mittig, passend zur zentrierten Gruppe. */
    .offer-bar__price-tag {
        justify-content: center;
    }

    /* Preis fluid 11-18px - bleibt der groesste Text, waechst mit den
       Buttons mit und muss neben dem CTA in die Zeile passen. */
    .offer-bar__price-value {
        font-size: clamp(0.6875rem, 3.2vw, 1.125rem);
    }

    /* Beschriftungen ("ab", "p. P. im DZ") fluid 8-11px. */
    .offer-bar__price-label,
    .offer-bar__price-note {
        font-size: clamp(0.5rem, 1.6vw, 0.6875rem);
    }

    /* Buttons: fluide 8-14px-Schrift mit vollen Labels (Herleitung s.
       Blockkommentar), Padding in em skaliert die Pille mit; 32px
       Mindesthoehe (bewusst unter der Tap-Empfehlung - Kundenwunsch
       "flacher"). */
    .offer-bar__cta,
    .offer-bar__consult-btn {
        font-size: clamp(0.5rem, 2.4vw, 0.875rem);
        padding: 0.44em 0.85em;
        min-height: 2rem;
    }
}