: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: ab 1206px ist der Balken EINE Zeile (Preis-Tag,
   Anfrage-Button und Beratungs-Button nebeneinander). Auf gequetschten
   Breiten (<=1205px, Kundenwunsch) steht der Preis in einer eigenen
   Zeile UEBER den beiden Buttons - erst dadurch bleiben die Buttons
   dort gross genug; dabei haelt der Balken IMMER mindestens 24px
   (1.5rem) Aussenkante links/rechts, und die Preis-Teile ("ab", Preis,
   "p. P. im DZ") stehen in EINER Zeile nebeneinander. Gequetscht heisst:
   769-1205px rechtsverankert mit min-width:50%, <=768px volle Breite.
   Alle Elemente ruecken als zentrierte Gruppe mit JEWEILS GLEICHEM
   Abstand zusammen (Mail "Glas Leiste" 24.08., vorher Zwillings-Zonen
   mit ungleichen Luecken); der gemeinsame Abstand kommt aus
   --offer-bar-gap und gilt fuer Balken-column-gap UND die Luecke
   Preis/CTA innerhalb der Preiszone. Der Balken darf NICHT ueber die
   50%-Marke nach links in die Bildspalte wachsen (Kundenwunsch) - die
   Klemmen der gequetschten Stufen sind deshalb so bemessen, dass die
   Button-Zeile (worst case: Feinreisen) auf jeder Breite in ihr Budget
   passt; das Ventil des 1300er-Blocks bleibt nur als Sicherheitsnetz.
   Groessenstaffelung einzeilig: Desktop >1500 volle Groesse, 1441-1500
   eine Stufe kleiner, 1301-1440 noch eine Stufe, 1206-1300
   15px-Buttons. Gequetscht (<=1205) fluide vw-Klemmen, s. die Bloecke
   unten. 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). */
    padding: 0 2rem;
    /* EIN gemeinsamer Abstand zwischen allen drei Elementen (Kundenwunsch
       Mail 24.08.): gilt hier als column-gap zwischen den Zonen und in
       .offer-bar__price als gap zwischen Preis-Tag und CTA. Die
       Media-Stufen unten ueberschreiben nur noch diese Variable. */
    --offer-bar-gap: 1.25rem;
    column-gap: var(--offer-bar-gap);
    /* Alle drei Elemente als Gruppe mittig im Balken (gleichmaessige
       Abstaende statt 50/50-Zwillings-Zonen). */
    justify-content: center;
    /* Dezentes Glas (Auswahl aus .reports/offerbar-glass-variants.md):
       Alpha 0.5, blur nur 8px, damit der Seiteninhalt hinter dem Balken
       erkennbar bleibt; saturate 160% haelt das Glas farbig statt grau.
       Prefixed und unprefixed Deklaration immer synchron halten
       (Safari braucht -webkit-). */
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) 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;
    /* Gleicher Abstand wie zwischen den Zonen (s. --offer-bar-gap im
       Balken) - so sind die Luecken Preis/CTA und CTA/Beratungs-Button
       identisch (Kundenwunsch Mail 24.08.). */
    gap: var(--offer-bar-gap);
    /* Natuerliche Breite: die Zone traegt nur ihren Inhalt, die Gruppe
       zentriert der Balken selbst (justify-content im Basisblock). */
    flex: 0 0 auto;
    /* 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); kein Trenner mehr zwischen den
       Zonen (ebenfalls Kundenwunsch). Mit und ohne Preis identisch:
       natuerliche Breite, die Gruppe zentriert der Balken selbst. */
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Nur vertikal - die horizontalen Kanten setzt das Container-Padding. */
    padding: 1.5rem 0;
}

.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) {
    /* Gemeinsamer Element-Abstand dieser Stufe (s. Basisblock). */
    .offer-bar {
        --offer-bar-gap: 1rem;
    }

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

    .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 die dreiteilige Gruppe einzeilig in den 50%-Balken
   passt. */
@media (min-width: 1301px) and (max-width: 1440px) {
    /* Gemeinsamer Element-Abstand dieser Stufe (s. Basisblock). */
    .offer-bar {
        --offer-bar-gap: 0.75rem;
    }

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

    .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/gequetscht (769-1300px): 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. Gilt fuer die kleinste einzeilige Stufe
   (1206-1300) UND die gequetschte Anordnung (769-1205, s. unten).
   white-space:nowrap aus den Basisregeln bleibt aktiv, die Klemmen der
   Stufen sorgen dafuer, dass jede Zeile in ihr Budget 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%;
        --offer-bar-gap: 0.85rem;
    }

    /* Das Vertikal-Padding wandert auf den Balken (eine Zeile = eine Box);
       die natuerliche Zonen-Breite kommt bereits aus dem Basisblock. */
    .offer-bar__price,
    .offer-bar__consult {
        padding: 0;
    }
}

/* Kleinste einzeilige Stufe (1206-1300px): Buttons 15px/42px, Preis eine
   Stufe kleiner (18px, wie die 1301-1440er-Nachbarstufe), kompaktes
   Balken-Padding. Ab 1206px passt der Zeileninhalt (worst case Feinreisen
   mit Preis + "p. P. im DZ": ~602px) in die halbe Viewport-Breite -
   darunter uebernimmt die gequetschte Anordnung (Preis-Zeile ueber den
   Buttons), damit der Balken nie ueber die 50%-Marke waechst. */
@media (min-width: 1206px) and (max-width: 1300px) {
    /* Element-Abstand: 0.85rem aus dem 1300er-Block. */
    .offer-bar {
        padding: 0.6rem 1.5rem;
    }

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

/* Gequetschte Anordnung (<=1205px, Kundenwunsch): der Preis steht in
   einer eigenen Zeile UEBER den beiden Buttons, seine Teile ("ab",
   Preis, "p. P. im DZ") bleiben dabei in EINER Zeile nebeneinander.
   Der Balken haelt IMMER mindestens 24px (1.5rem) Aussenkante
   links/rechts.
   Technik: display:contents loest die beiden Zonen-Wrapper auf, dadurch
   werden Preis-Tag, Anfrage-Button und Beratungs-Button direkte
   Flex-Items des Balkens; flex-wrap + flex-basis:100% am Preis-Tag
   erzwingen die eigene Preis-Zeile, die Buttons teilen sich die zweite
   Zeile mit --offer-bar-gap dazwischen. Der Preis-Tag wechselt vom
   2-Spalten-Grid (Zusatz unter dem Preis) auf eine Flex-Zeile, damit
   der Zusatz NEBEN dem Preis steht. 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: 1205px) {
    .offer-bar {
        /* Mindestens 24px Aussenkante links/rechts (Kundenwunsch). */
        padding: 0.4rem 1.5rem;
        /* Muss NACH der padding-Kurzform stehen: die safe-area ADDIERT
           sich zur Unterkante (s. Blockkommentar). */
        padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
        /* Zwei Zeilen: Preis oben, Buttons darunter. */
        flex-wrap: wrap;
        row-gap: 0.3rem;
        align-items: center;
    }

    /* Zonen-Wrapper aufloesen: Preis-Tag und beide Buttons werden direkte
       Flex-Items des Balkens (noetig fuer die Preis-Zeile ueber der
       Button-Zeile, ohne das Template zu aendern). */
    .offer-bar__price,
    .offer-bar__consult {
        display: contents;
    }

    /* Preis-Tag als eigene volle Zeile ueber den Buttons; Flex statt Grid,
       damit "ab", Preis und "p. P. im DZ" in EINER Zeile stehen
       (Kundenwunsch; im Grid spannte der Zusatz eine zweite Zeile auf). */
    .offer-bar__price-tag {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        align-items: baseline;
        column-gap: 0.35rem;
        white-space: nowrap;
    }
}

/* Gequetschter Desktop (769-1205px): Balken bleibt rechtsverankert mit
   min-width:50% (Ventil s. 1300er-Block). Budget der Button-Zeile =
   halbe Viewport-Breite minus 2x24px Kante; die 1.5vw-Klemme haelt die
   Zeile auf jeder Breite darunter (worst case Feinreisen, headless
   kalibriert: ~336px bei 11.5px-Buttons und 769px Viewport), Deckel
   15px ab ~1000px. */
@media (min-width: 769px) and (max-width: 1205px) {
    .offer-bar {
        /* Feste halbe Breite statt des width:auto-Ventils: die
           max-content-Breite eines wrappenden Flex-Containers rechnet
           alle Items in EINER Zeile - das Ventil wuerde den Balken
           deshalb trotz Umbruch ueber die 50%-Marke ziehen. Die
           Klemmen unten stellen sicher, dass die Button-Zeile in die
           halbe Breite passt. */
        width: 50%;
        min-width: 0;
        --offer-bar-gap: 0.75rem;
    }

    /* Preis fluid 16-20px, Beschriftungen fluid 10-12px. */
    .offer-bar__price-value {
        font-size: clamp(1rem, 1.8vw, 1.25rem);
    }

    .offer-bar__price-label,
    .offer-bar__price-note {
        font-size: clamp(0.625rem, 1.1vw, 0.75rem);
    }

    /* Buttons fluid 11-15px, Padding in em skaliert die Pille mit. */
    .offer-bar__cta,
    .offer-bar__consult-btn {
        font-size: clamp(0.6875rem, 1.5vw, 0.9375rem);
        padding: 0.44em 0.85em;
        min-height: 2.5rem;
    }
}

/* Mobil (<=768px): gequetschte Anordnung wie oben (Preis-Zeile ueber den
   Buttons, 24px Kanten), aber ueber die GESAMTE Breite statt
   rechtsverankert. Volle Button-Labels bleiben (Kundenwunsch: Wortlaut
   komplett).
   FLUIDE Groesse: Budget der Button-Zeile = Viewport minus 2x24px Kante.
   Headless kalibriert braucht die Zeile (volle Labels) ~290px bei
   10px-Buttons - die 2.9vw-Klemme haelt sie auf jeder Breite einzeilig:
   ~9.3px auf 320er-Displays, ~11px bei 375px, 15px-Deckel ab ~517px.
   Button-Padding in em, damit die Pillen mit der Schrift mitwachsen. */
@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%;
        --offer-bar-gap: 0.5rem;
    }

    /* Preis fluid 14-20px - durch die eigene Zeile ist Platz fuer eine
       groessere Darstellung (Kundenwunsch Mail 24.08.). */
    .offer-bar__price-value {
        font-size: clamp(0.875rem, 4vw, 1.25rem);
    }

    /* Beschriftungen ("ab", "p. P. im DZ") fluid 10-12px. */
    .offer-bar__price-label,
    .offer-bar__price-note {
        font-size: clamp(0.625rem, 2.4vw, 0.75rem);
    }

    /* Buttons: fluide 9-15px-Schrift mit vollen Labels (Herleitung s.
       Blockkommentar), Padding in em skaliert die Pille mit; 36px
       Mindesthoehe. */
    .offer-bar__cta,
    .offer-bar__consult-btn {
        font-size: clamp(0.5625rem, 2.9vw, 0.9375rem);
        padding: 0.44em 0.85em;
        min-height: 2.25rem;
    }
}