@charset "UTF-8";
/**
 * CSS Klassen und Bereiche für die responsiven Ansichten, bzw. definierten Viewports 980, 768, 600, 320.
 *
 * Viewport 320 ist die kleinste Bildschirmbreite die unterstützt wird. Die min-width wird in webclient-touch festgelegt:
 *     body .wrapper {
 *         min-width: 320px;
 *     }
 */

/* Alle responsiven Seiten dürfen keinen Content mehr rechts vom sichtbaren (mit Scrollbar) produzieren */
body, html {
    max-width: 100%;
}

/* Nur im Bereich zwischen 768 und 980px: Klicks auf Links im Menu-Hauptbereich
   sollen für Non-Hover-Devices _nicht_ ausgeführt werden, so lange das Flyout nicht ausgeklappt wurde
 */
@media only screen and (min-width: 769px) {
    #header.responsive-extended:not(.active) .header-topcontent a {
        pointer-events: none;
    }

    @media (hover: hover) {
        #header.responsive-extended:not(.active) .header-topcontent a {
            pointer-events: all;
        }
    }
}

/* Viewport 980 und weniger */
@media only screen and (max-width: 980px) {
    body .wrapper {
        width: 100% !important;
    }

    .container-940 {
        width: calc(100% - 40px);
    }

    .container-980 {
        width: 100%;
    }

    .container-380 {
        width: 49%;
    }

    .container-260 {
        width: 66%;
    }

    .container-110 {
        width: 30%;
    }

    .container-120 {
        width: 30%;
    }

    .w-720 {
        width: 70% !important;
    }

    section.legende .container-300 {
        width: 40%;
    }

    section.legende .container-520 {
        width: 60%;
    }

    fieldset .fs-sidebar {
        width: 30% !important;
    }

    section.postversand-ticket fieldset .w-660,
    section.reservierungs-details fieldset .w-660,
    section.lastschrift fieldset .w-660,
    section.kreditkarte fieldset .w-660 {
        width: 66% !important;
    }

    section.reservierungs-details fieldset .fs-sidebar {
        width: 34% !important;
    }

    section.registrierung {
        width: 100% !important;
    }

    section.visual {
        width: 100% !important;
    }

    .legende-2-cols .container-300 {
        width: 100% !important;
        margin-top: 20px;
    }

    /* Kassenseite */
    section.ecoupon .container-380,
    section.code .container-380 {
        width: 380px;
    }

    section.kreditkarte.kasse-kk-kachel-fk .container-120 {
        width: 120px;
    }

    /* Bestaetigungsseite */
    section.additional-statements .flex-container .flex-container-data {
        display: flex;
        align-items: center;
        width: 65%;
        flex-wrap: wrap;
    }

    section.additional-statements .flex-container .flex-container-data .data-column {
        width: 100%;
        padding-right: 32px;
        padding-left: 0;
    }

    section.additional-statements .flex-container .flex-container-data .data-column:not(:first-child) {
        padding-top: 16px;
    }

    section.kreditkarte.select-fiku-kk .w-660 {
        width: 100% !important;
    }

    section.kreditkarte.select-fiku-kk .fs-sidebar {
        width: 100% !important;
        text-align: left;
        padding-left: 70px;
        padding-top: 0;
    }

    /* BC Buchungsstrecke */
    section.customer-data.bahncard-data .bahncard-daten .c-data .grid-wrapper-3 .grid-left,
    section.customer-data.bahncard-data .select-field .flex-container .flex-item.label {
        margin-right: 0;
    }

    section.customer-data.bahncard-data .bahncard-daten .c-data .grid-wrapper-3 .grid-left {
        width: 100%;
        padding-bottom: 8px;
    }

    section.customer-data.bahncard-data .select-field .flex-container {
        flex-wrap: wrap;
        width: 100%;
    }

    section.customer-data.bahncard-data .select-field .flex-container .flex-item {
        width: 100%;
    }

    a.gsd.viewport-desktop {
        display: none;
    }

    a.gsd.viewport-mobile {
        display: block;
    }

    section.vorteaser.reiseversicherung .flex-container .flex-item.select-field.container-110 {
        width: 110px;
    }

    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column.ankunftszeit-angabe {
        display: flex;
    }

    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column,
    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column .error-container {
        width: 100%;
        flex-wrap: wrap;
    }

    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column.ankunftszeit-angabe > div:nth-child(2) {
        margin-top: 8px;
    }

    .fahrgastrechte #filepond-content .file-group .inner-left {
        width: 50%;
        margin-left: 20px;
    }

    .fahrgastrechte #filepond-content .file-group .inner-left,
    .fahrgastrechte #filepond-content .file-group .filepond--root.filepond--hopper {
        width: 50%;
    }

    /* Buchungsrückschau */
    fieldset .fs-content.fs-content-brs .container-380 {
        width: 380px;
    }

    #key-visual img {
        width: 100%;
    }
}

/* DateRangePicker Spezialfälle */
@media only screen and (max-width: 912px) {
    /* Ab dieser Größe kann der Picker nicht mehr als Layer schwebend unter Element dargestellt werden,
        sondern rückt fensterfüllend ganz nach links
     */
    .daterangepicker {
        width: auto;
        margin-left: 0;
    }

    .daterangepicker:before {
        left: 50px;
    }

    .daterangepicker:after {
        left: 51px;
    }
}

@media only screen and (max-width: 720px) {
    /* Ranges müssen in eigene Zeile wandern */
    .daterangepicker .ranges {
        margin-top: 24px;
    }

    .daterangepicker .ranges ul li {
        display: inline-block;
        margin: 4px;
    }
}

/* Viewport 900 und weniger */
@media only screen and (max-width: 900px) {
    /* Auftragdetails */
    section.auftragdetails .grid-container-5 {
        grid-template-areas:
            'cont-1 cont-3 cont-5'
            'cont-2 cont-4 cont-5';
        grid-template-columns: 250px auto 160px;
    }

    section.auftragdetails .grid-container-5 .container-2,
    section.auftragdetails .grid-container-5 .container-4 {
        padding-top: 8px;
    }

    section.auftragdetails .grid-container-5 .container-2 {
        padding-left: 48px;
    }

    section.bc-ersatzkarte .grid-container-5,
    section.bc-ersatzkarte-auswahl .grid-container-5 {
        grid-template-areas:
        "cont-1 cont-1 cont-1 cont-1"
        "cont-2 cont-3 cont-4 cont-5";
    }

    section.bc-ersatzkarte .grid-container-5.pers-daten {
        grid-template-areas:
        "cont-1 cont-2 cont-3 cont-4 cont-5";
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 {
        grid-template-columns: 170px auto;
    }

    section.bc-ersatzkarte .grid-container-5 {
        grid-template-columns: 220px auto auto 0;
    }

    section.bc-ersatzkarte .grid-container-5.pers-daten {
        grid-template-columns: 220px auto auto auto 25px;
    }

    section.bc-ersatzkarte .grid-container-5 .container-1,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-1 {
        padding-bottom: 16px;
    }
}

/* Viewport 768 bis 591 für Tablets etc */
@media only screen and (max-width: 768px) {

    /** Allgemeines */

    input[type="checkbox"] + label.icon .ico.icon-down {
        display: block;
    }

    input[type="radio"] + label.small {
        margin-left: 8px;
    }

    input[type="checkbox"] + label.icon,
    input[type="radio"] + label.icon {
        padding-left: 118px;
    }

    input[type="checkbox"] + label .ico,
    input[type="radio"] + label .ico {
        left: 48px;
    }

    input[type='checkbox'] + label.withouticon {
        padding-left: 56px;
    }

    /* Responsive Header */

    #header.responsive-extended #service-elements {
        display: none;
    }

    #header.responsive-extended .header-flyout {
        display: none;
        visibility: hidden; /* dies dient auch als marker, dass keine Hover-Funktionalität (non-responsive view) existiert */
    }

    #header.responsive-extended #logo {
        padding: 14px 16px;
    }

    #header.responsive-extended #logo img {
        width: 40px;
    }

    #header.responsive-extended #submenu-closer {
        float: left;
        padding: 16px;
    }

    #header.responsive-extended .userinfo {
        display: none;
    }

    #header.responsive-extended .login {
        display: none;
    }

    #header.responsive-extended #menu-responsive,
    #header.responsive-extended #menu-responsive .submenu {
        display: block;
        position: absolute;
        right: 0;
        width: 0;
        transition: width 500ms;
    }

    #header.responsive-extended #menu-responsive {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        z-index: -1;    /* damit der Schatten vom Header drüber fällt */
    }

    #header.responsive-extended.active #menu-responsive {
        width: 100%;
    }

    #header.responsive-extended #menu-responsive,
    #header.responsive-extended #menu-responsive .menu,
    #header.responsive-extended #menu-responsive .submenu {
        background: #fff;
        box-shadow: 0 2px 8px 0 rgb(0,0,0,0.3);
        height: 100%;
    }

    #header.responsive-extended #menu-responsive .submenu {
        z-index: 1;
        top: 0;
    }

    #header.responsive-extended #menu-responsive.active .submenu {
        width: 65%;
    }

    #header.responsive-extended #menu-responsive.no-transition,
    #header.responsive-extended #menu-responsive .submenu.no-transition {
        transition: none;
    }

    #header.responsive-extended #menu-responsive .navtitle {
        background-color: #F0F3F5;
        display: none;
        flex: 0;
    }

    #header.responsive-extended #menu-responsive div.menu-container {
        position: relative;
        flex: 1;
    }

    #header.responsive-extended #menu-responsive.active .menu {
        background-color: #F0F3F5;
    }

    #header.responsive-extended #menu-responsive ul {
        padding: 0 0 16px;
    }

    #header.responsive-extended #menu-responsive li,
    #header.responsive-extended #menu-responsive .navtitle {
        padding: 0;
        font-size: 16px;
    }

    #header.responsive-extended #menu-responsive li {
        white-space: nowrap;    /* damit während transition kein Umbruch passiert */
        border-bottom: 1px solid #d6d6d6;
    }

    #header.responsive-extended #menu-responsive li a {
        padding: 12px 16px;
        display: block;
        line-height: 24px;
    }

    #header.responsive-extended #menu-responsive .submenu li {
        /* Links/rechts margin statt padding, damit auch die Linien dazwischen Abstand haben */
        margin: 0 16px;
    }

    #header.responsive-extended #menu-responsive .submenu li a {
        padding-left: 0;
    }

    #header.responsive-extended #menu-responsive .submenu li.anfasser {
        display: none;
        border-color: #fff #fff transparent transparent;
        /* Höhe des Anfassers für Position selber ausgleichen: Wurzel(2) * 0.5em, da das Quadrat um 45 Grad gedreht ist */
        margin: 0.72em 0 0;
        padding: 0;
        border-style: solid;
        border-width: 0.5rem;
        box-shadow: 0.1875em -0.1875em 0.1875em 0 rgb(0,0,0,0.15);
        position: absolute;
        left: 0;
        top: 0;
        transform: rotate(225deg);
        transform-origin: 0 0;
    }

    #header.responsive-extended #menu-responsive.active .submenu li.anfasser {
        display: block;
    }

    #header.responsive-extended #menu-responsive a.submenu-opener {
        display: block;
        background: url(../img/icon/icon-arrow_right.svg) no-repeat scroll right 18px center;
    }

    #header.responsive-extended #menu-responsive.active a.submenu-opener,
    #header.responsive-extended #menu-responsive .pagenav a {
        font-family: "DBScreenSansBold", "DBSansBold", "Arial", "Helvetica", sans-serif;
    }

    #header.responsive-extended #menu-responsive.active a.submenu-opener {
        color: #C50014;
    }

    /* absichtlich niedrigere Wertigkeit, damit die Definiiton bei :hover höher priorisiert wird! */
    #menu-responsive li.service a {
        color: #646973;
    }

    #header.responsive-extended #menu-responsive li a > span {
        background: url(../img/icon/icon-arrow_right.svg) no-repeat left center;
        padding-left: 24px;
    }

    #header.responsive-extended #menu-responsive li a > span.nobreak {
        white-space: nowrap;
    }

    #header.responsive-extended #menu-responsive #softlogin-logout-btn-resp a {
        display: flex;
        align-content: baseline;
    }

    #header.responsive-extended #menu-responsive #softlogin-logout-btn-resp a > span {
        margin-left: 8px;
    }

    #header.responsive-extended #menu-responsive #softlogin-logout-btn-resp a > span.no-image {
        background-image: none;
        padding-left: 0;
        margin-left: 0;
    }

    #header.responsive-extended #menu-responsive li.login {
        display: list-item;
        float: unset;
    }

    #header.responsive-extended #menu-responsive li.login.hidden {
        display: none;
    }

    #header.responsive-extended #menu-responsive li.login a > span {
        background: url(../img/icon/20dp_icon_action_account-solid.svg) no-repeat left center;
    }

    #header.responsive-extended #menu-opener {
        display: block;
        float: right;
        padding: 16px;
    }

    #header.responsive-extended #menu-opener > a {
        background: url(../img/icon/ic_navigation_menu_burger.svg) no-repeat center center;
        display: block;
        width: 24px;
        height: 24px;
    }

    #header.responsive-extended.active #menu-opener > a {
        background-image: url(../img/icon/icon_close.svg);
    }

    /* Meine Bahn / Portalseiten */

    #willkommen .begruessung {
        -webkit-line-clamp: 3;
    }

    /* Navigation links ausblenden */
    .wrapper.responsive .menuarea {
        display: none;
    }

    .wrapper.responsive .content.portal {
        padding-left: 16px;
        padding-right: 16px;
    }

    .container-700 {
        width: calc(100% - 40px);
        margin-right: 20px;
    }

    .container-140 {
        width: 45%;
    }

    .container-380 {
        width: 100%;
    }

    .w-480 {
        width: 100% !important;
    }

    section.legende .container-700 {
        width: 100%;
    }

    #header #header-elements {
        width: 85%;
        margin-bottom: 10px;
    }

    section.registrierung {
        width: 100% !important;
    }

    section .fs-header.grey .w-480 {
        width: 65% !important;
    }

    section .fs-header.grey .fs-sidebar {
        padding-left: 10px;
        padding-right: 15px;
        width: 35% !important;
    }

    section.kreditkarte .container-120 {
        width: 120px;
    }

    section.kreditkarte .container-300 {
        width: 100% !important;
        padding-bottom: 14px;
    }

    section.kreditkarte .cc-pruefziffer-link {
        width: 100%;
        margin-left: 0;
    }

    section.kreditkarte a.form-link.pruefziffer-link {
        margin-left: 2px;
    }

    section.kreditkarte a.form-link.pruefziffer-link span {
        display: block;
    }

    section.kasse-kk-kachel .fs-content.kreditkarte-anlegen {
        padding-left: 56px;
    }

    section.customer-data .fs-header .edit-icon {
        right: 16px;
    }

    section.registrierung .fieldset-inner,
    section.reiseversicherung .fieldset-inner {
        padding: 16px;
    }

    section.registrierung.customer-data fieldset.lieferadresse .fs-content {
        margin-left: 6px;
        margin-right: 16px;
    }

    section.registrierung.customer-data fieldset.lieferadresse .fs-header.margin {
        margin: 5px 16px 10px 16px;
    }

    section.registrierung.customer-data fieldset.lieferadresse input[type="radio"] + label {
        padding-left: 40px;
        margin-left: 8px;
    }

    section.registrierung.customer-data fieldset.lieferadresse input[type="checkbox"] + label {
        padding-left: 32px;
    }

    section.registrierung.customer-data fieldset.lieferadresse .fs-content h4,
    section.registrierung.customer-data fieldset.lieferadresse .fs-content .content-row {
        padding-left: 10px;
    }

    section.registrierung.reg-pruef .fs-header {
        width: 95% !important;
    }

    section.registrierung input[type="checkbox"] + label {
        padding-left: 52px;
        margin-left: 2px;
    }

    section .fs-header h3 {
        width: 100% !important;
    }

    section .fs-header .item {
        padding-left: 56px;
    }

    .error-container {
        clear: both;
    }

    .pg-bar-wrapper .pg-list li {
        display: none;
    }

    .pg-bar-wrapper .pg-list li.active {
        display: block;
        width: 100%;
    }

    .js-fieldset-toggle .fs-content {
        padding-left: 60px;
    }

    .js-fieldset-toggle .fs-content.maxwidth {
        padding-left: 20px;
    }

    .form-link.pull-right {
        float: left;
        clear: both;
        margin-top: 0;
    }

    section header a.form-link.pull-right {
        margin-top: 16px;
    }

    #buchungfuerdritte-content fieldset .fieldset-inner,
    #buchungfuerdritte-content .fieldset-inner,
    .content-reisenderauswahl .fieldset-inner {
        padding-left: 0;
        padding-right: 30px;
    }

    #buchungfuerdritte-content {
        padding-right: 20px;
    }

    #ressitzwunsch {
        margin-right: 20px;
    }

    section.online-ticket .fs-content,
    section.postversand .fs-content,
    section.sofort .fs-content,
    section.bahnbonus .fs-content,
    section.lastschrift .fs-content,
    section.kreditkarte .fs-content,
    section.paypal .fs-content,
    section.ecoupon .fs-content,
    section.paydirekt .fs-content,
    section.reiseversicherung .fs-content,
    section.plusCity .fs-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    section.postcontent.legende-2-cols {
        padding-left: 20px;
    }

    section.postcontent.legende .form-link.datenschutz-link {
        display: block;
        margin-top: 0;
    }

    #buchungfuerdritte-content {
        padding-right: 0;
    }

    section.reiseversicherung .fs-content.olthinweis p {
        padding-left: 20px;
    }

    section.reiseversicherung .fs-content.olthinweis .icon-icon_ausrufezeichen_rot {
        left: 12px;
    }

    fieldset .fs-sidebar h4.info {
        padding-right: 0;
    }

    .legende-2-cols .container-520 {
        width: 100% !important;
    }

    section.login .login-password input[type="checkbox"] + label {
        margin-left: -2px;
    }

    .login-options {
        margin-top: 20px;
    }

    .error .error-description {
        width: 90% !important;
        padding: 20px 30px 20px 20px;
    }

    .error .content.hinweis .error-description {
        padding: 20px 30px 20px 20px;
    }
    .error .new-request {
        padding: 30px 20px;
    }

    section.kreditkarte div.kreditkarte-anlegen.fs-content button {
        margin-right: 0;
    }

    section.kreditkarte .kreditkarte-anlegen .col2 {
        width: 100% !important;
    }

    section.buy-it .buttons .btn {
        margin: 0 5px;
        padding: 16px 6px;
    }

    fieldset .fs-content.withicon {
        padding-left: 56px;
    }

    #buchungfuerdritte-content fieldset .fieldset-inner,
    .content-reisenderauswahl .fieldset-inner {
        padding-left: 56px;
    }

    #resprefs-sitzplaetze input[type="checkbox"] + label span.headline + .custom-select {
        width: 208px;
    }

    .icon-reservierungsempfehlung {
        left: -58px;
    }

    fieldset .fs-content .grid-wrapper-3 {
        margin-left: 56px;
    }

    fieldset .fs-header .sub {
        margin: 0 0 15px 118px;
    }

    fieldset .fs-content .grid-wrapper-3 .grid {
        margin-right: 10px;
    }

    /* Reservierungswunesche */
    section.reservierungs-details .fs-header .w-660 {
        width: auto !important;
    }

    section.reservierungs-details .fs-header .respflicht {
        padding-left: 118px;
    }

    section.reservierungs-details .fs-header .w-660 label {
        padding-right: 0;
    }

    section.reservierungs-details input[type="checkbox"] + label .ico {
        left: 56px;
    }

    section.reservierungs-details .fs-header .fs-sidebar {
        width: auto !important;
        padding-left: 0;
    }

    section.reservierungs-details .form-link {
        float: right;
        clear: none;
    }

    section.reservierungs-details.success .rd-connection,
    section.reservierungs-details.attention .rd-connection,
    section.reservierungs-details.error .rd-connection,
    section.reservierungs-details.disabled .rd-connection {
        padding-left: 70px;
    }

    section.reservierungs-details .rd-content table {
        margin-left: 70px;
    }

    /* Zusatzleistungen */
    section.zusatzangebote fieldset .fs-content.withicon,
    div.zusatzangebote .fs-header .item,
    section.reiseversicherung fieldset .fs-content{
        padding-left: 56px;
    }

    /* Persoenliche Daten */
    section.customer-data .grid-wrapper-3 h4.indent {
        margin-left: 14px;
    }

    section.customer-data fieldset .custom h4.indent {
        margin-left: 16px;
        margin-right: 16px;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid-left {
        width: 100%;
        padding-bottom: 8px;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid-middle,
    section.customer-data .c-data .grid-wrapper-3 .grid-right {
        width: 50%;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid.twoCols {
        width: 100%;
        padding-left: 14px;
    }

    section.customer-data fieldset .custom .w-380 {
        width: 100% !important;
        float: left;
        padding-top: 12px;
        padding-left: 10px;
    }

    section.customer-data fieldset .custom .w-380 div.pull-right {
        float: left;
    }

    /* Kasse */
    section.kreditkarte .part-fiku-kk {
        padding: 30px 30px 22px 30px;
    }

    div.zahlungsart-auswahl input[type="radio"] + label.icon {
        padding-left: 140px;
    }

    div.zahlungsart-auswahl input[type="radio"] + label .ico {
        left: 60px;
    }

    section#section-kk .kk-expire-hint.inline-block {
        display: block;
        padding-left: 0;
    }

    section.kreditkarte .autodetect-kk-type {
        display: none;
    }

    section.ecoupon .container-380,
    section.code .container-380 {
        width: 60%;
    }

    /* Login */
    section.registrierung.login-registrierung .fieldset-inner {
        padding-right: 20px;
    }

    section.login input[type="checkbox"] + label {
        margin-left: 0;
    }

    section.registrierung fieldset .fieldset-inner .has-overlay, fieldset .fieldset-inner .no-overlay {
        top: 0;
    }

    /* Bestätigungsseite */
    section.next-steps ul li {
        width: calc(100%/2 - 20px);
    }

    section.teasers-big .teaser .content {
        padding: 20px;
    }

    section.teasers-big .teaser .content .left-column,
    #content-crossselling-hrsbuchen-teaser .left-column {
        width: 100%;
        padding-right: 0;
    }

    section.teasers-big .teaser .content .right-column,
    #content-crossselling-hrsbuchen-teaser .right-column {
        width: 100%;
        padding-top: 16px;
    }

    section.teasers-big .teaser.open .content .left-column img {
        width: 100%;
    }

    section.teasers-big.kundenbindung main {
        display: flex;
    }

    section.teasers-big.kundenbindung .teaser {
        width: 45%;
        flex-grow: 1;
    }

    section.teasers-big.kundenbindung .teaser:nth-child(2) {
        margin: 0 0 16px 16px;
    }

    section.teasers-big.kundenbindung .teaser .preview .no-toggle {
        display: flex;
        flex-direction: column;
    }

    section.teasers-big.kundenbindung .teaser .preview .no-toggle img {
        width: auto;
        border-radius: 4px 4px 0 0;
    }

    section.teasers-big.kundenbindung .teaser .preview .no-toggle .text {
        width: auto;
    }

    section.stornierung .grid-container-5 {
        grid-template-areas:
            'cont-1 cont-3 cont-3 cont-3 cont-5'
            'cont-2 cont-4 cont-4 cont-4 cont-5';
    }

    section.stornierung .grid-container-5.table-title {
        display: none;
    }

    section.stornierung .grid-container-5.content-title span.title {
        display: block;
    }

    section.stornierung .grid-container-5 > div span.label {
        padding: 10px 20px 0 0;
    }

    section.procedure main {
        padding: 0 10px 20px 0;
    }

    section.procedure .flex-container-steps {
        flex-wrap: wrap;
        padding-top: 20px;
    }

    section.procedure .flex-container-steps .bst.step  {
        padding-top: 0;
        padding-left: 20px;
    }

    section.procedure .flex-container-steps .step {
        margin: 20px 0 0 0;
        padding: 0;
        text-align: left;
        display: flex;
        width: 100%;
    }

    section.procedure .flex-container-steps .step:first-child {
        margin-top: 0;
    }

    section.procedure .step h3 {
        margin: 0;
    }

    section.procedure .flex-container-steps .step .visual {
        width: 104px;
        flex-shrink: 0;
        padding-top: 0;
    }

    section.procedure .flex-container-steps .step .visual .ico {
        height: 64px;
    }

    section.procedure .flex-container-steps .step .step-content {
        flex-grow: 1;
    }

    section.procedure .flex-container-steps .step .step-content p {
        margin: 8px 0;
    }

    div.bestaetigung .alert .ico.icon_glocke_grau {
        margin: 0 16px 0 0;
    }

    .bahncard-row {
        margin-bottom: 0;
    }
    .bahncard-row .bahncard-teaser {
        width: 100%;
    }

    .bahncard-row .bahncard-teaser-content .bc-icon {
        padding-left: 30px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .bahncard-row .bahncard-teaser-content .bc-icon img {
        width: 40%;
    }

    .bahncard-row .bahncard-teaser-content .bc-preis {
        bottom: 18px;
    }

    .bahncard-row .bahncard-teaser-content.business .bc-preis {
        position: absolute;
    }

    .bahncard-row .bahncard-teaser-content .bc-button {
        width: auto;
        right: 10px;
    }

    .bahncard-row .bahncard-teaser-content .bc-button.pull-left {
        left: 10px;
    }

    .bahncard-row .bahncard-teaser-content.business .bc-icon {
        margin-bottom: 0;
    }

    .bahncard-data fieldset .fieldset-inner .adresse-auswahl-label {
        width: 100%;
    }

    .bahncard-data fieldset .fieldset-inner label.radio {
        padding-left: 34px;
    }

    .bahncard-data fieldset .fieldset-inner input[type="radio"] + label,
    .bahncard-data fieldset .fieldset-inner input[type="radio"]:checked + label{
        background-position-x: 0;
    }

    section.bahncard-foto-upload main {
        padding-left: 16px;
    }

    section.bahncard-foto-upload .bahncard-img {
        width: 100%;
    }

    section.bahncard-foto-upload .bahncard-zustellart {
        width: 100%;
        padding-top: 32px;
        padding-left: 0;
    }

    section.vorteaser .flex-container {
        flex-wrap: wrap;
    }

    section.vorteaser .flex-item {
        width: 100%;
    }

    section.vorteaser .flex-container .flex-item.select-label,
    section.vorteaser .flex-container .flex-item.select-label.withtoplabel {
        width: 100%;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 10px;
    }

    section.vorteaser.reiseversicherung .flex-container .flex-item.select-field .versicherter-container {
        width: 100%;
    }

    section.vorteaser.reiseversicherung .flex-container .flex-item.select-field.container-110 {
        width: 110px;
    }

    section.bc-nachweis .fs-header .item {
        padding-left: 16px;
    }

    div.button-section section.options .leftside.fullBtnWidth {
        display: block;
    }

    div.button-section section.options .leftside.fullBtnWidth .btn.grey {
        width: auto;
    }

    div.button-section section.options .leftside.fullBtnWidth .btn.pull-left.fullWidth {
        width: 100%;
        text-align: center;
    }

    div.button-section section.options .btn.pull-right.fullBtnWidth {
        width: 100%;
    }

    div.button-section section.options .btn.pull-right.fullBtnWidth {
        margin-bottom: 24px;
    }

    /* Layer */
    div.overlay-content.zustellart-layer .flex-container-steps {
        padding: 10px 0;
    }

    div.overlay-content.zustellart-layer .flex-container-steps.laststep .step .visual {
        width: 104px;
    }

    .overlay-content .teilpreis .verbindung .grid-container-3 .grid-area-1 {
        display: none;
    }

    .overlay-content .teilpreis .verbindung .grid-container-3 {
        grid-template-areas:
            "area-2 area-3"
            "area-5 area-6";
        grid-template-columns: repeat(2, 50%);
    }

    .overlay-content .teilpreis h4.fahrtrichtung {
        display: block;
        margin-left: 24px;
        padding-top: 16px;
    }

    /* Back to top ab 768 und kleiner */
    @media screen and (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    #footer .footer-responsive  {
        padding-bottom: 72px;
    }

    #footer .footer-responsive.errorpage  {
        padding-bottom: 32px;
    }

    .back-to-top a {
        position: fixed;
        bottom: 16px;
        left: 44%;
        text-decoration: none;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background-color: #FFFFFF;
        padding: 0.25rem;
        box-shadow: 0 4px 10px #afb4bb;
        transition: transform 80ms ease-in;
    }

    .back-to-top a:hover {
        transform: scale(1.1);
    }

    .back-to-top a:focus {
        outline: none;
    }

    .back-to-top a:before {
        content: "";
        background: url("../img/icon/icon_arrow_top.svg") no-repeat center;
        position: absolute;
        width: 46px;
        height: 46px;
        left: 0;
        top: 0;
    }

    .back-to-top {
        display: block;
        position: fixed;
        width: 100vw;
        height: 70px;
        bottom: 0;
        background-image: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
        background-image: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
        background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
    }

    div.confirmation-header {
        display: block;
    }

    div.confirmation-header-box {
        width: 100%;
    }

    div.confirmation-header-box section {
        margin: 0;
    }

    div.confirmation-header-hrs-container {
        margin: 8px 0 0 0;
    }

    div.confirmation-header-hrs-container div {
        justify-content: flex-start;
    }

    div.confirmation-header-hrs-container div.button-and-text {
        padding-top: 0;
    }

    div.confirmation-header-hrs-container div.hrsbanner-visual {
        width: 104px;
        flex-shrink: 0;
    }

    div.confirmation-header-hrs-container div.hrsbanner-visual .icon_hrsbanner {
        transform: scale(0.7);
    }

    div.confirmation-header-hrs-container div.hotelbanner-text {
        margin: 14px 24px 14px 0;
        min-height: 40px;
    }

    div.confirmation-header-hrs-container div.hotelbanner-text span {
        text-align: left;
    }

    div.confirmation-header-hrs-container div.hotelbanner-text br {
        display: none;
    }

    div.confirmation-header-hrs-container div.aufklappbereich span {
        width: 100%;
        padding-top: 4px;
        text-align: left;
    }

    div.confirmation-header-hrs-container div.aufklappbereich .button-section {
        padding-top: 16px;
        width: 100%;
    }

    div.confirmation-header-hrs-container a.toggle.clearfix {
        display: block;
        position: absolute;
        top: 20px;
        right: 10px;
        padding: 10px;
    }

    section.confirmation-header-hrs {
        display: flex;
    }

    section.confirmation-header-hrs .teaser .aufklappbereich {
        display: none;
    }

    section.confirmation-header-hrs .teaser.open .aufklappbereich {
        display: flex;
    }

    /* Geschenkgutscheine */
    .geschenkgutscheinmotiveTable .vorschau-container {
        width: 33%;
    }

    /* Meine Bahn */
    #hauptseite-grid .grid-area .form-link.pull-right {
        float: right;
    }

    /* Fahrgastrechte */
    .fahrgastrechte {
        padding-left: 20px;
        padding-right: 20px;
    }

    .fahrgastrechte section.registrierung .fieldset-inner {
        padding: 16px 40px;
    }

    .fahrgastrechte input[type="radio"] + label.hide-radio,
    .fahrgastrechte input[type="radio"]:checked + label.hide-radio {
        padding-left: 40px;
    }

    .container-980.fgr-erfassung div.button-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .fgr-erfassung div.button-section section.options .btn.pull-right {
        width: 100%;
    }

    .fgr-erfassung div.button-section section.options .btn {
        margin-bottom: 24px;
    }

    .fgr-erfassung div.button-section section.options .btn:last-child {
        margin-bottom: 0;
    }

    .fgr-erfassung div.button-section section.options .btn.grey {
        margin-right: 0;
    }

    .fahrgastrechte .flex-container {
        flex-wrap: wrap;
    }

    .fahrgastrechte .infotext {
        margin-left: 0;
    }

    .fahrgastrechte .fahrplan-container .flex-container .flex-container-data.pull-left {
        width: 100%;
    }

    .fahrgastrechte .fahrplan-container .flex-container .flex-container-data.pull-right {
        margin-left: 0;
    }

    .bcdaten .kamin.header-with-contentfenster {
        float: left;
        left: 20px
    }

    /* Buchungsrückschau */
    section.brs-filter .button-section {
        padding-left: 16px;
    }

    fieldset.brs-fieldset .fs-header input[type="radio"] + label {
        padding-right: 0;
    }

    fieldset.brs-fieldset:first-of-type .fs-header input[type="radio"] + label {
        padding-bottom: 8px;
    }

    fieldset.brs-fieldset {
        flex-wrap: wrap;
    }

    fieldset .fs-header.fs-header-brs,
    fieldset .fs-content.fs-content-brs {
        margin-right: 0;
        width: 100%;
    }

    fieldset.brs-fieldset:first-of-type .fs-content-brs {
        padding-right: 0;
        padding-top: 0;
    }

    fieldset.brs-fieldset .fs-content-brs {
        padding-top: 0;
        padding-left: 60px;
        padding-right: 16px;
    }

    section.brs-uebersicht .grid-container-5 {
        grid-template-areas:
        "cont-1 cont-2 cont-3 cont-3 cont-5"
        "cont-4 cont-4 cont-4 cont-4 cont-4";
    }

    section.brs-uebersicht .grid-container-5 .container-4 {
        padding-top: 8px;
    }

    /* Auftragdetails */
    section.auftragdetails .grid-container-5 {
        grid-template-columns: 220px auto 160px;
    }

    section.box-section .icon-and-text-wrapper {
        flex-wrap: wrap;
        gap: 12px;
    }

    section.box-section .icon-and-text-wrapper .button-abschnitt {
        padding-left: 48px;
    }

    .stornierung section.box-section .icon-and-text-wrapper .button-abschnitt,
    .verbundprodukt section.box-section .icon-and-text-wrapper .button-abschnitt,
    .kaufbeleg section.box-section .icon-and-text-wrapper .button-abschnitt {
        padding-left: 0;
    }

    section.box-section .icon-and-text-wrapper .left-container,
    section.box-section.withKorrekturBeleg .icon-and-text-wrapper .left-container,
    section.box-section.kaufbeleg-bestaetigung .icon-and-text-wrapper .left-container {
        max-width: 80%;
    }

    section.box-section .icon-and-text-wrapper .right-container {
        width: 100%;
    }

    section.box-section .icon-and-text-wrapper .right-container input,
    section.box-section .icon-and-text-wrapper .right-container a.btn {
        float: left;
    }

    /* BRS Details Auftragsdaten */
    .brsDetailsTable .row .cont-1,
    .brsDetailsTable .row .cont-2,
    .brsDetailsTable .row .cont-3 {
        padding-bottom: 16px;
    }

    .brsDetailsTable .grid-container-2 {
        width: 100%;
    }

    .brsDetailsTable .grid-container-3 {
        grid-template-areas:
        'cont-1 cont-2 cont-3';
        grid-template-columns: 25% auto 20%;
        gap: 2%;
    }

    .brsDetailsTable .grid-container-4 {
        grid-template-areas:
        'cont-1 cont-2 cont-3'
        'cont-4 cont-4 cont-4';
        grid-template-columns: 25% auto 20%;
    }

    .brsDetailsTable .grid-container-5 {
        grid-template-areas:
        'cont-1 cont-2 cont-3'
        'cont-4 cont-4 cont-5';
        grid-template-columns: 25% auto 20%;
    }

    .brs-storno-default,
    .brs-storno-box .brs-storno-content .indent,
    .brs-storno-content > p {
        max-width: 80%;
    }

    .brs-storno-default.withButton .grid-container-2 {
        grid-template-areas:
        'cont-1'
        'cont-2';
        grid-template-columns: auto;
        gap: 12px;
    }

    .brs-storno-hinrueck .grid-container-hr-2 {
        display: block;
    }

    .brs-storno-hinrueck .grid-container-hr-2 .grid-container-2:last-child .cont-2 {
        padding-bottom: 12px;
    }

    .brs-storno-hinrueck .grid-container-hr-2 .cont-2 .btn.darksilver,
    .brs-storno-hinrueck .grid-container-3.withButton .btn.darksilver,
    .brs-storno-default.withButton .grid-container-2 .cont-2 .btn.darksilver {
        float: left;
    }

    .brs-storno-hinrueck .grid-container-hr-2 .grid-container-2 {
        grid-template-areas:
        'cont-1'
        'cont-2';
        grid-template-columns: auto auto;
    }

    .brs-storno-hinrueck .grid-container-3 {
        grid-template-areas:
        'cont-1 cont-3'
        'cont-2 cont-3';
        grid-template-columns: auto auto;
    }

    .brs-storno-hinrueck .grid-container-3.withButton {
        display: block;
        padding-bottom: 0;
    }

    .brs-storno-hinrueck .grid-container-3 .cont-2 {
        padding-right: 8px;
    }

    .brs-storno-hinrueck .grid-container-hr-2 .grid-container-2:not(:first-of-type),
    .brs-storno-hinrueck .grid-container-3.withButton .cont-3 {
        padding-top: 8px;
    }

    .brs-storno-hinrueck .grid-container-hr-2 input[type="checkbox"] + label {
        padding-bottom: 4px;
    }

    .brs-storno-hinrueck .grid-container-hr-2 .grid-container-2 .cont-2,
    .brs-storno-hinrueck .grid-container-hr-2 .cont-2 {
        padding-left: 34px;
    }

    .confirmation-header.rva-olt section.container-full {
        padding: 20px;
    }

    .erstattung-kasse section.lastschrift .container-380 {
        width: 100%;
    }

    .erstattung-kasse section.lastschrift fieldset .fs-content.withicon {
        padding-left: 89px;
    }

    .flex.hinweis {
        flex-wrap: wrap;
    }

    .flex-item-left,
    .flex-item-right {
        width: 100%;
    }

    .flex-item-right {
        margin-top: 16px;
    }

    .brsDetailsTable.erstattung .grid-container-3,
    .brsDetailsTable.erstattung.erstattungsart-kk .grid-container-3 {
        grid-template-columns: 50% 50%;
        grid-template-areas:
        'cont-1 cont-2'
        'cont-3 cont-3';
        gap: 10px;
    }

    .erstattungsantrag .container-700 {
        width: 100%;
        margin-right: 0;
    }

    #shopcontent .portalcontentcenter,
    #shopcontent .portalcontentright {
        width: calc(100% - 204px - 16px);
        margin-bottom: 0;
    }

    #shopcontent .portalcontentright {
        border-top: 2px solid #F0F3F5;
        float: right;
        padding-top: 28px;
    }

    /* Label ausblenden */
    #shopcontent table.form.shopwarenkorb th.col1 span {
        display: none;
    }

    .content .topmeldung {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 768px) and (min-width: 591px) {
    /* Bestätigungsseite - Teaser Ticket */
    section.confirmation-header-ticket {
        display: flex;
    }

    .confirmation-header.rva-olt section.confirmation-header-ticket {
        display: block;
    }

    div.confirmation-header-ticket .ticket div.visual,
    div.confirmation-header-ticket .reservierung div.visual {
        width: 104px;
        flex-shrink: 0;
    }

    div.confirmation-header-ticket div.text .versand-info {
        padding: 8px 0;
    }

    div.confirmation-header-ticket div.text {
        justify-content: left;
    }

    div.confirmation-header-ticket div.text span {
        text-align: left;
    }

    div.bestaetigung .alert {
        padding-left: 20px;
    }
}

@media (max-width: 750px) {
    /* Pruef/Bestaetigungsseite */
    div.angebotskonditionen section.offers .offers-content-row .column-1 {
        flex-wrap: wrap;
    }
    div.angebotskonditionen section.offers .offers-content-row .description-info,
    div.angebotskonditionen section.offers .offers-content-row .description {
        padding-top: 12px;
        padding-left: 68px;
        width: 100%;
    }

    section.additional-statements .flex-container {
        flex-wrap: wrap;
    }

    section.additional-statements .flex-container .flex-container-title {
        width: 100%;
    }

    section.additional-statements .flex-container .flex-container-data .data-column {
        padding: 16px 24px 0 0;
    }

    section.additional-statements.registrierung .flex-container .flex-container-data .data-column {
        padding: 8px 24px 0 0;
    }

    section.abo-center .div-table-row {
        flex-wrap: wrap;
    }

    section.abo-center .div-table-cell,
    section.abo-center .div-table-cell.head {
        width: 100%;
    }

    section.abo-center .div-table-cell.head + .div-table-cell {
        padding-top: 0;
    }

    /* BRS */
    .brs-hinweis-mit-link,
    .brs-hinweis-mit-link .text,
    .brs-hinweis-mit-link .link {
        display: block;
    }

    .brs-hinweis-mit-link .link {
        padding-top: 8px;
    }

    .brs-hinweis-mit-link span a.arrowlink {
        margin-left: 0;
    }
}

@media (max-width: 650px) {
    div.container-560 {
        width: 100%;
    }

    div.logininfo {
        padding-right: 16px;
    }

    /* Fortschrittsanzeige */
    .pg-bar-res-wrapper {
        padding: 18px 8px 8px 8px;
    }

    .pg-bar-res-wrapper table td {
        padding: 0;
    }

    .pg-bar-res-wrapper table td a,
    .pg-bar-res-wrapper table td.active span,
    .pg-bar-res-wrapper table td.inactive span {
        display: none;
    }

    .pg-bar-res-wrapper div.custom-select {
        display: block;
        border: none;
        height: 30px;
        margin-bottom: 0;
    }

    .pg-bar-res-wrapper div.custom-select .ico.icon-down {
        top: 0;
    }

    .pg-bar-res-wrapper div.custom-select .dropdown {
        height: 24px;
        padding-left: 8px;
        font-size: 0.875em;
    }

    .pg-bar-res-wrapper div.custom-select .dropdown option span.active {
        font-family: "DBScreenSansBold", "DBSansBold", "Arial", "Helvetica", sans-serif;
    }

    /* Footer */
    #footer .footer-responsive .col-left h3,
    #footer .footer-responsive .col-right h3 {
        text-align: center;
    }

    #footer .footer-responsive .row .col-left {
        margin: 0;
        padding: 0;
    }

    #footer .footer-responsive .row .col-right {
        margin: 24px 0 0 0;
        padding: 0;
    }

    #footer .footer-responsive .row.twoCols {
        display: flex;
        flex-flow: column;
    }

    #footer .footer-responsive .footer-menu span.menu-entry {
        line-height: 32px;
    }

    .col-right .footer-menu a:first-child {
        margin-left: initial;
    }

    /* Buchungsrückschau */
    section.brs-uebersicht .grid-container-5 {
        grid-template-areas:
            "cont-1 cont-1 cont-2 cont-2 cont-5"
            "cont-4 cont-4 cont-3 cont-3 cont-3";
    }

    section.brs-uebersicht .grid-container-5 .container-3,
    section.brs-uebersicht .grid-container-5 .container-4 {
        padding-top: 8px;
    }

    section.brs-uebersicht .grid-container-5.gk {
        grid-template-areas:
                "cont-1 cont-1 cont-1 cont-1 cont-5"
                "cont-2 cont-2 cont-3 cont-3 cont-3"
                "cont-4 cont-4 cont-4 cont-4 cont-4";
    }

    section.brs-uebersicht .grid-container-5.gk .container-2,
    section.brs-uebersicht .grid-container-5.gk .container-3 {
        padding-top: 8px;
    }

    section.brs-uebersicht .grid-container-5.gk .container-4 {
        padding-top: 12px;
    }

    /* Auftragdetails */
    section.auftragdetails .grid-container-5 {
        grid-template-areas:
            'cont-1 cont-2'
            'cont-3 cont-4'
            'cont-5 cont-5';
        grid-template-columns: 50% 50%;
    }

    section.auftragdetails .grid-container-5 .container-4 {
        padding-right: 0;
    }

    section.auftragdetails .grid-container-5 .container-2 {
        padding-top: 0;
        padding-left: 0;
    }

    section.auftragdetails .grid-container-5 .container-3,
    section.auftragdetails .grid-container-5 .container-4,
    section.auftragdetails .grid-container-5 .container-5 {
        padding-top: 16px;
    }

    /* BC Ersatzkarte */
    section.bc-ersatzkarte-auswahl .grid-container-5 {
        grid-template-areas:
            "cont-1 cont-1"
            "cont-2 cont-5"
            "cont-3 cont-5"
            "cont-4 cont-4";
        grid-template-columns: auto;
    }

    section.bc-ersatzkarte .grid-container-5 {
        grid-template-areas:
            "cont-1"
            "cont-2"
            "cont-3"
            "cont-4"
            "cont-5";
        grid-template-columns: auto;
    }

    section.bc-ersatzkarte .grid-container-5.pers-daten {
        grid-template-areas:
            'cont-1 cont-3 cont-4 cont-5'
            'cont-2 cont-2 cont-2 cont-5';
        grid-template-columns: auto auto auto 25px;
    }

    section.bc-ersatzkarte .grid-container-5 .container-2 > span.title,
    section.bc-ersatzkarte .grid-container-5 .container-2 > span.label,
    section.bc-ersatzkarte .grid-container-5 .container-3 > span.title,
    section.bc-ersatzkarte .grid-container-5 .container-3 > span.label,
    section.bc-ersatzkarte .grid-container-5 .container-4 > span.title,
    section.bc-ersatzkarte .grid-container-5 .container-4 > span.label,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-2 > span.title,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-2 > span.label,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-3 > span.title,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-3 > span.label,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-4 > span.title,
    section.bc-ersatzkarte-auswahl .grid-container-5 .container-4 > span.label {
        display: inline;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .details,
    section.bc-ersatzkarte .grid-container-5 .details {
        display: flex;
        align-items: baseline;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .details span.title,
    section.bc-ersatzkarte .grid-container-5 .details span.title {
        width: 150px;
    }
}

/* Für genau 600px (Tablets) und gemeinsame Definitionen die auch für Mobilegeräte unterhalb 590 gelten */
@media (max-width: 600px) {

    /* Responsive Header */
    #header.responsive-extended #menu-responsive .navtitle {
        display: block;
        padding-left: 16px;
    }

    #header.responsive-extended #menu-responsive .navtitle a.home {
        background: url(../img/icon/icon-home.svg) no-repeat left center;
        pointer-events: none;
        cursor: default;
        float: left;
        display: block;
        height: 48px;
        width: 36px;
        padding: 0;
    }

    #header.responsive-extended #menu-responsive.active .navtitle a.home {
        pointer-events: auto;
        cursor: pointer;
    }

    #header.responsive-extended #menu-responsive .submenu-title {
        display: none;
    }

    #header.responsive-extended #menu-responsive.active .submenu-title {
        display: block;
        background: url(../img/icon/icon-arrow_right.svg) no-repeat;
        padding-left: 24px;
        margin: 14px 30px;
        line-height: 20px;
    }

    #header.responsive-extended #menu-responsive.active .submenu {
        width: 100%;
    }

    #header.responsive-extended #menu-responsive .submenu li {
        /* Links/rechts KEIN margin mehr, damit die Linien dazwischen bis zum Rand gehen */
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    #header.responsive-extended #menu-responsive.active .submenu li.anfasser {
        display: none;
    }

    /* Meine Bahn / Portalseiten */

    /* ACHTUNG: heisst in invision Headline H4! */
    .wrapper.responsive .content.portal h2 {
        font-size: 16px;
        line-height: 24px;
    }

    /* ACHTUNG: heisst in invision Headline H5! */
    .wrapper.responsive .content.portal h4 {
        font-size: 14px;
        line-height: 20px;
    }

    /*Bestätigungsseite */
    section.next-steps main {
        margin: 0;
    }

    section.next-steps ul li {
        width: 100%;
        margin: 5px 0;
        padding-left: 10px;
        min-height: auto;
        border-radius: 0;
    }

    section.teasers-big.kundenbindung main {
        flex-wrap: wrap;
    }

    section.teasers-big.kundenbindung .teaser,
    section.teasers-big.kundenbindung .teaser .preview .toggle,
    section.teasers-big.kundenbindung .teaser .preview .no-toggle img {
        width: 100%;
        border-radius: 0;
    }

    section.teasers-big.kundenbindung .teaser .preview .toggle,
    section.teasers-big.kundenbindung .teaser .preview .no-toggle .text {
        width: auto;
    }

    section.teasers-big.kundenbindung .teaser:nth-child(2) {
        margin: 16px 0 0 0;
    }

    section.stornierung .grid-container-5 {
        grid-template-areas:
            'cont-1 cont-3 cont-3 cont-3 cont-3'
            'cont-2 cont-4 cont-4 cont-4 cont-4'
            'cont-2 cont-5 cont-5 cont-5 cont-5';
    }

    div.pruefen-buchen section.additional-statements.res-error .reshinweis-detail {
        padding: 20px 0 20px 0;
        width: 100%;
        display: block;
    }

    div.pruefen-buchen section.additional-statements.res-error .reshinweis {
        width: 100%;
        display: block;
    }
    /* File Upload */
    input[type=file] {
        padding: 8px 0;
    }

    .flex-container.fileupload .flex-item {
        width: 100%;
        padding: 0;
    }

    .flex-container.fileupload .flex-item.fileupload-datei input {
        width: 100%;
    }

    .flex-container.fileupload  .error-container {
        padding-top: 16px;
    }

    .flex-container.fileupload  .fileupload-datei .button-inside {
        text-align: left;
        width: 100%;
        padding-top: 16px;
    }

    .flex-container.fileupload .button-inside button {
        width: 100%;
    }

    #hauptseite-grid .grid-area .column-area {
        flex-wrap: wrap;
    }

    #hauptseite-grid .grid-area .column-area ul.linklist {
        margin-top: 20px;
    }

    #hauptseite-grid .links-area.additional-services {
        margin-top: 16px;   /* kommen 16px Abstand durch hauptseite-grid grid-gap hinzu = 32px */
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 8px;
    }

    #hauptseite-grid .grid-title {
        font-size: 16px;
        line-height: 22px;
    }

    #hauptseite-grid .links-area.additional-services .grid-title {
        margin-bottom: 8px; /* kommen 8px aus additional-services grid-gap hinzu = 16px */
     }

    #hauptseite-grid .links-area.auskunft-services .icon {
        background-image: none;
    }

    #hauptseite-grid .links-area.auskunft-services .grid-area h5 {
        padding-left: 0;
    }
}

/* Darstellung für Mobilgeräte, Viewport minimal 320 */
@media (max-width: 590px) {

    /* Meine Bahn / Portalseiten */

    #header.responsive-extended #submenu-closer > a {
        background: url(../img/icon/icon-arrow_left.svg) no-repeat;
        padding-left: 24px;
        font-size: 16px;
        line-height: 24px;
    }

    #header.responsive-extended.submenu-active #logo {
        display: none;
    }

    #header.responsive-extended.submenu-active #submenu-closer {
        display: block;
    }

    #header.responsive-extended #menu-responsive #softlogin-logout-btn-resp a {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    #header.responsive-extended #menu-responsive #softlogin-logout-btn-resp a > span {
        margin-left: 0;
    }

    #header.responsive-extended #menu-responsive li a > span.shorten.nobreak {
        max-width: calc(100% - 1.25ch); /* Platz lassen für Fragezeichen. 1 würde vermutl. reichen, 1.25 zur Sicherheit */
    }

    .wrapper.responsive .content.portal {
        padding-left: 0;
        padding-right: 0;
    }

    #hauptseite-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 8px;
    }

    #hauptseite-grid .grid-area {
        border-radius: 0;
    }

    #hauptseite-grid .grid-area .button-abschnitt {
        margin-top: 0;
    }

    #hauptseite-grid .page-outro {
        padding-left: 16px;
        padding-right: 16px;
    }

    #hauptseite-grid .links-area {
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 8px;
    }

    #hauptseite-grid .links-area .icon {
        background-image: none;
    }

    #hauptseite-grid .links-area .grid-area h5 {
        padding-left: 0;
    }

    #hauptseite-grid .links-area.auskunft-services {
        margin-bottom: 8px; /* kommen 8px Abstand durch hauptseite-grid grid-gap hinzu = 16px */
    }

    #hauptseite-grid .links-area .grid-area a .rot {
        border-radius: 0;
    }

    #hauptseite-grid .links-area.additional-services {
        margin-top: 24px; /* kommen 8px Abstand durch hauptseite-grid grid-gap hinzu = 32px */
    }

    #hauptseite-grid .additional-services .grid-area {
        background-image: url(../img/icon/20dp_icon_navigation_chevron-right.svg);
        background-repeat: no-repeat;
        background-position: right 16px top 22px;
    }

    #hauptseite-grid .grid-title {
        padding-left: 16px;
    }

    #hauptseite-grid .bc-punkte-grid .row.statuspunkte-row {
        display: block;
    }

    #hauptseite-grid .bc-punkte-grid .row {
        margin-top: 16px;
    }

    #hauptseite-grid .bc-punkte-grid .title-cell {
        flex: 0 0 116px;
    }

    #hauptseite-grid .bc-punkte-grid .row.statuspunkte-row .data-cell {
        padding-right: 0;
        text-align: left;
    }

    .portal.content .contentarea {
        padding: 0 16px;
    }

    .error .content.hinweis .error-description {
        padding-right: 10px;
    }

    /* Footer */
    #footer .footer-responsive .col-left .footer-menu {
        flex-flow: column;
    }

    #footer .footer-responsive .row .col-left a {
        margin-right: 0;
        margin-bottom: 16px;
    }

    #footer .footer-responsive .row .col-left a:last-child {
        margin-bottom: 0;
    }

    .portal.content .page-intro, .content .topmeldung {
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 24px;
    }

    .content .topmeldung .topmeldung-frame {
        margin-top: 0;
        border-left-width: 40px;
    }

    .content .topmeldung .topmeldung-frame::before {
        left: -32px;
    }

    section.header.nopaddingleft {
        padding-left: 16px !important;
    }

    .container-580 {
        width: 100%;
    }

    .container-940 {
        width: 100%;
        margin-left: 0;
    }

    .container-940 h3 {
        margin-left: 16px;
        margin-right: 16px;
    }

    section {
        border-radius: 0;
    }

    section header {
        border-radius: 0;
    }

    section main {
        border-radius: 0;
    }

    section.connection main {
        border-radius: 0;
    }

    section.teasers-big .teaser {
        border-radius: 0;
    }

    section.legende .container-300 {
        width: 100%;
    }

    section.legende .container-520 {
        width: 100%;
        padding-top: 20px;
        float: left;
    }

    input[type="checkbox"] + label {
        background-position-x: 16px;
    }

    input[type="checkbox"] + label .ico,
    input[type="radio"] + label .ico {
        display: none;
    }

    input[type="checkbox"] + label a.has-overlay .ico,
    input[type="radio"] + label a.has-overlay .ico {
        display: block;
    }

    input[type="radio"] + label.icon,
    input[type="checkbox"] + label.icon,
    input[type="radio"] + label,
    input[type="checkbox"] + label {
        padding-left: 56px;
    }

    input span.headline, input[type="radio"] + label span.headline,
    input[type="checkbox"] + label span.headline,
    input.input-hidden + label span.headline,
    label.without-input span.headline {
        font-size: 0.875em;
    }

    fieldset .fs-content .grid-wrapper-3 .grid {
        width: 100%;
        padding-right: 16px;
    }

    h3 ~ a.form-link,
    section header h3 ~ a.form-link {
        margin-left: 16px;
    }

    .kamin.warenkorb .preiscontainer {
        max-width: 100% !important;
        width: 100%;
    }

    .kamin.warenkorb .preiscontainer .price.col1,
    .kamin.warenkorb .preiscontainer .price.col2 {
        font-size: 1em;
    }

    .kamin.warenkorb .container-940 {
        margin-left: 16px;
        margin-right: 16px;
        width: calc(100% - 32px);
    }

    .kamin.warenkorb .preiscontainer .price.col2 {
        max-width: 140px;
        padding-left: 0;
    }

    .container-980 div.button-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    section.registrierung.registrierungsvorteile .btn.pull-right,
    section.login .button-abschnitt .btn.pull-right,
    div.button-section section.options .btn.pull-right {
        width: 100%;
    }

    section.registrieren .subtitle {
        margin-right: 38px;
    }

    div.button-section section.options .leftside {
        display: block;
    }

    div.button-section section.options .leftside .btn.grey {
        width: auto;
    }

    div.button-section section.options .btn.pull-left.fullWidth {
        width: 100%;
        text-align: center;
    }

    div.button-section section.options .btn {
        margin-bottom: 24px;
    }

    div.button-section section.options .btn:last-child {
        margin-bottom: 0;
    }

    div.button-section section.options .rightside .btn:last-child {
        margin-right: 0;
    }

    div.button-section section.options .btn.grey {
        margin-right: 0;
    }

    fieldset .fs-content h4,
    fieldset .fs-sidebar h4 {
        font-size: 0.875em;
    }

    fieldset .fs-header .sub {
        margin: 0 0 15px 56px;
    }

    section.postversand-ticket fieldset .w-660,
    fieldset .fs-header .w-660,
    fieldset .fs-header .w-720,
    fieldset .fs-header .fs-sidebar {
        width: 100% !important;
    }

    fieldset .fs-header .fs-sidebar {
        padding-top: 0;
    }

    fieldset .fs-header input[type="checkbox"] + label,
    fieldset .fs-header input[type="radio"] + label {
        padding-right: 50px;
    }

    div#adresseval-modallayer-layer-content fieldset .fs-header input[type="radio"] + label {
        padding-right: 0;
    }

    fieldset .fs-content.withicon {
        padding-right: 16px;
    }

    fieldset .fs-content.withicon .item {
        padding-right: 0;
    }

    section.verbindungsueberwachung fieldset .fs-content.withicon {
        padding-left: 18px;
    }

    .content-respref {
        margin-left: 48px;
    }

    .icon-reservierungsempfehlung {
        left: -48px;
    }

    /* Buchenwunsch */
    section.postversand-ticket.disabled .fs-sidebar .ico.icon-icon_info_small {
        top: 8px;
        left: 54px;
    }

    section.postversand-ticket.disabled .fs-sidebar .post-disable {
        float: left;
        padding-left: 72px;
    }

    #buchungfuerdritte-content fieldset .fieldset-inner,
    #resprefs-sitzplaetze input[type="checkbox"] + label.icon,
    #resfahrt.fs-content {
        padding-right: 16px;
    }

    .geburtsdatum .tag-wrapper,
    .geburtsdatum .monat-wrapper,
    .geburtsdatum .jahr-wrapper,
    #resprefs-sitzplaetze input[type="checkbox"] + label span.headline + .custom-select,
    #resfahrt.fs-content .custom-select {
        width: 100%;
    }

    #resprefs-sitzplaetze input[type="checkbox"] + label span.headline + .custom-select {
        margin-right: 0;
    }

    /* Reservierungswunesche */
    section.reservierungs-details .fs-header .fs-sidebar {
        width: 100% !important;
        padding-left: 56px;
        padding-top: 0;
    }

    section.reservierungs-details .fs-header .respflicht {
        padding-left: 56px;
    }

    section.reservierungs-details .form-link {
        float: left;
        clear: both;
    }

    section.reservierungs-details.success .rd-connection,
    section.reservierungs-details.attention .rd-connection,
    section.reservierungs-details.error .rd-connection,
    section.reservierungs-details.disabled .rd-connection {
        padding-left: 52px;
    }

    section.reservierungs-details fieldset .fs-sidebar {
        float: left;
        padding-top: 0;
        padding-left: 84px;
        width: 100% !important;
        text-align: left;
    }

    section.reservierungs-details.disabled .fs-header .w-660 label,
    section.reservierungs-details.error .fs-header .w-660 label {
        padding-left: 16px;
    }

    section.reservierungs-details.disabled .fs-header .w-660 input[type='checkbox'] + label,
    section.reservierungs-details.error .fs-header .w-660 input[type='checkbox'] + label {
        padding-left: 56px;
    }

    section.reservierungs-details.disabled .fs-header .w-660 label .ico,
    section.reservierungs-details.error .fs-header .w-660 label .ico {
        display: none;
    }

    section.reservierungs-details .rd-content table {
        margin-left: 50px;
        margin-right: 16px;
    }

    div.sitzplatz-hinweis {
        margin-left: 16px;
        width: calc(100% - 32px);
    }

    #res-error {
        padding-left: 16px;
        padding-right: 16px;
    }

    .legende .container-520 {
        width: auto;
    }

    /* Zusatzleisutungen */
    div.zusatzangebote section.visual {
        display: none;
    }

    div#anschlussmobilitaet fieldset .fs-content,
    section.reiseversicherung fieldset .fs-content {
        padding-right: 16px;
        padding-left: 16px;
    }

    div#anschlussmobilitaet .option-wrapper label span.preis {
        float: left;
        padding-top: 4px;
        display: block;
        width: 100%;
    }

    /* Persoenliche Daten */
    section.registrierung.customer-data .fs-content.telefon {
        margin-left: 16px;
        margin-right: 16px;
    }

    section.customer-data .grid-wrapper-3 h4.indent {
        margin-left: 0;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid-middle {
        padding-bottom: 24px;
        padding-right: 0;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid-middle,
    section.customer-data .c-data .grid-wrapper-3 .grid-right {
        width: 100%;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid {
        width: 100%;
    }

    section.customer-data .c-data .grid-wrapper-3 .grid.twoCols {
        padding-left: 0;
    }

    section.customer-data fieldset .custom .w-380 {
        padding-left: 12px;
        padding-right: 16px;
    }

    /* Kasse */
    div.favorite-za {
        padding-left: 16px;
    }

    div.favorite-za input[type="checkbox"] + label.favorisiertezahlart {
        padding-right: 16px;
    }

    section.kreditkarte div.cc-error {
        padding-left: 0;
    }

    section.kreditkarte .part-fiku-kk {
        padding: 16px;
    }

    section.kreditkarte .cc-chooser li {
        margin-right: 10px;
    }

    section.kreditkarte .cc-chooser li img {
        width: 50px;
    }

    section.kreditkarte .kreditkarte-typ {
        padding-left: 0;
    }

    section.kreditkarte .kk-gueltigkeit-label {
        padding-top: 16px;
    }

    section.kreditkarte .kk-auto-typ,
    section.kreditkarte .kk-gueltigkeit-auswahl,
    section.kreditkarte div.cc-pruefziffer-input {
        width: 100%;
        padding-top: 8px;
    }

    section.kreditkarte .threedsecure .threedsecure-link {
        margin-left: 0;
    }

    section.kasse-kk-kachel label.icon i.icon-icon_kreditkarte_large {
        top: 24px;
    }

    div.zahlungsart-auswahl input span.headline.center-payment,
    div.zahlungsart-auswahl input[type="radio"] + label span.headline.center-payment,
    div.zahlungsart-auswahl input[type="checkbox"] + label span.headline.center-payment,
    section.bahnbonus input[type="checkbox"] + label span.headline.center-payment {
        line-height: 30px;
    }

    section.kreditkarte .kk-data .kk-typ {
        font-size: 0.875em;
    }

    div.zahlungsart-auswahl input[type="radio"] + label.icon {
        padding-left: 126px;
        padding-right: 16px;
    }

    div.zahlungsart-auswahl section.kreditkarte.kasse-kk-kachel input[type="radio"] + label.icon {
        padding-right: 54px;
    }

    div.zahlungsart-auswahl input[type="radio"] + label .ico {
        left: 50px;
        display: block;
    }

    div.zahlungsart-auswahl fieldset .fs-content.withicon {
        padding-left: 16px;
    }

    div.zahlungsart-auswahl .div-table-row {
        display: grid;
    }

    section.lastschrift.disabled .fs-sidebar .post-disable,
    section.kreditkarte.disabled .fs-sidebar .post-disable {
        float: left;
        text-align: left;
    }

    section#section-kk .col1.inline-block,
    section#section-kk .col2.inline-block {
        padding-right: 0;
        display: block;
    }

    section.kreditkarte .kreditkarte-image {
        left: 49px;
    }

    div.overlay-kreditkarten-uebersicht section.kreditkarten-uebersicht .div-table-row label {
        padding: 0 16px 0 50px;
    }

    section.kreditkarten-uebersicht .div-table .kk-expire-hint {
        padding-left: 0;
    }

    #overlay-kreditkarte.overlay-content fieldset {
        padding-left: 0;
        padding-right: 0;
    }

    #overlay-kreditkarte.overlay-content {
        width: calc(100vw - 1rem);
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen,
    #overlay-kreditkarte section.kreditkarte .kreditkarte-anlegen {
        padding-left: 16px;
        padding-right: 16px;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .container-200,
    #overlay-kreditkarte section.kreditkarte .fs-content.kreditkarte-anlegen .container-200 {
        width: 100%;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .container-90,
    #overlay-kreditkarte section.kreditkarte .fs-content.kreditkarte-anlegen .container-90 {
        width: 48%;
    }

    #overlay-kreditkarte section.kreditkarte input[type="radio"] + label .ico {
        display: inline;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer a.form-link {
        margin: 0 0 24px 0;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer .kk-pruefziffer-link {
        padding-left: 0;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer .kk-prueziffer-label,
    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer .kk-prueziffer-label .label,
    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer .kk-prueziffer-label .input {
        width: 100%;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer .kk-prueziffer-label .label {
        padding-bottom: 6px;
    }

    section.kreditkarte .fs-content.kreditkarte-anlegen .kk-pruefziffer .kk-prueziffer-label .input .input-wrapper {
        float: left;
    }

    section.kreditkarte div.error-container-padding {
        padding-left: 0;
        padding-right: 0;
    }

    .overlay-content .container-980.button-wrapper div.button-section section.options .btn.pull-left {
        width: 100%;
    }

    section.ecoupon .container-260 {
        width: 100%;
    }

    section.code fieldset .fs-content.withicon,
    section.ecoupon fieldset .fs-content.withicon,
    section.bahnbonus fieldset .fs-content.withicon {
        padding-left: 16px;
    }

    section.code .container-380,
    section.ecoupon .container-380 {
        width: 100%;
    }

    section.code .fs-content.withicon,
    section.ecoupon .fs-content.withicon {
        padding-right: 16px;
    }

    section.code .ec-section .code-wrapper .ec-submit {
        position: relative;
        left: 0;
        top: 0;
    }

    section.code .ec-section .code-wrapper .ec-submit input {
        width: 100%
    }

    section.kreditkarte.select-fiku-kk .fs-sidebar {
        padding-left: 56px;
    }

    /* Login */
    section.login {
        padding: 16px;
    }

    section.registrierung.login-registrierung .fieldset-inner {
        padding-right: 16px;
        padding-left: 16px;
    }

    section.registrierung.login-registrierung h4 {
        padding: 16px;
    }

    section.registrierungsvorteile div#registrierungsvorteile {
        padding-left: 18px;
    }

    section.registrierung.registrierungsvorteile .button-abschnitt {
        margin-top: 16px;
        margin-left: 16px;
    }

    /* Pruef-Seite */
    section.connection header {
        padding-left: 16px;
    }

    section.connection table .time {
        width: 30px;
        padding-left: 16px;
        padding-right: 0;
    }

    section.connection table .station,
    section.connection table .station-sub {
        padding-left: 0;
    }

    section.agb.bx-shadow,
    div.pruefen-buchen section.agb.bx-shadow {
        padding: 16px;
    }

    div.erstattungsantrag section.bx-shadow {
        padding: 0 16px;
    }

    div.angebotskonditionen section.offers .offers-content-row {
        flex-wrap: wrap;
    }

    div.angebotskonditionen section.offers .offers-content-row .description-info {
        padding-left: 13px;
    }

    div.angebotskonditionen section.offers .offers-content-row .price {
        padding-top: 16px;
        width: 100%;
    }

    div.angebotskonditionen section.offers .offers-content-row.gesamtpreis.nolayer .price {
        display: block;
    }

    div.angebotskonditionen section.offers .offers-content-row .description {
        padding-top: 12px;
        padding-left: 13px;
        padding-right: 13px;
    }

    .content.bestaetigung div.angebotskonditionen section.offers .offers-content-row .description {
        padding-left: 56px;
    }

    div.angebotskonditionen section.offers .offers-content-row .offer {
        padding-left: 56px;
    }

    section.additional-statements .flex-container.teaser .flex-container-data .edit-icon {
        top: initial;
    }

    section.additional-statements .flex-container.teaser .flex-container-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 28px;
    }

    section.additional-statements .flex-container.teaser .flex-container-title a.toggle.clearfix {
        display: block;
    }

    section.additional-statements .flex-container.teaser .toggle-icon .icon-up-red {
        display: none;
    }

    section.additional-statements .flex-container.teaser.open .toggle-icon .icon-down {
        display: none;
    }

    section.additional-statements .flex-container.teaser.open .toggle-icon .icon-up-red {
        display: block;
    }

    section.additional-statements .flex-container.teaser .aufklappbereich {
        display: none;
    }

    section.additional-statements .flex-container.teaser.open .aufklappbereich {
        display: flex;
    }

    #threedsecure-modallayer-content {
        width: 300px;
    }

    #threedsecure-modallayer-content.overlay-content {
        padding: 10px;
    }

    #threedsecure-modallayer-content iframe {
        width: 300px;
        margin-left: unset;
        margin-right: unset;
    }

    /* Bestätigungsseite */
    div.confirmation-header-box {
        width: 100%;
        border-radius: 0;
    }

    div.confirmation-header-box section {
        margin: 0;
    }

    div.confirmation-header-box section.confirmation-header-hrs {
        padding-left: 0;
    }

    div.confirmation-header-hrs-container div.hotelbanner-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    div.confirmation-header-hrs-container div.button-section,
    div.confirmation-header-hrs-container div.button-section a {
        width: 100%;
    }

    section.confirmation-header-hrs .teaser.open .aufklappbereich span {
        text-align: center;
    }

    section.procedure .visual > .ico {
        display: none;
    }

    section.procedure main {
        padding: 0 20px 15px 20px;
    }

    section.procedure .step.span-zweidrittel {
        width: 100%;
        padding: 0;
    }

    section.procedure .step.span-zweidrittel .dbnavigator {
        margin-bottom: 5px;
    }

    section.procedure main.reise-benachrichtigung {
        padding-top: 20px;
    }

    div.bestaetigung .alert {
        display: flex;
        padding-top: 0;
        padding-left: 0;
    }

    div.bestaetigung .alert .ico.small {
        top: -2px;
        flex-shrink: 0;
    }

    div.bestaetigung .alert span {
        padding-left: 6px;
    }

    section.procedure .flex-container-steps {
        margin: 0;
    }

    section.procedure .flex-container-steps .step .step-icon {
        display: none;
    }

    section.procedure .flex-container-steps .step .step-content .btn {
        width: 100%;
    }

    section.procedure .flex-container-steps .bst.step {
        padding-left: 0;
    }

    div.bestaetigung .alert .ico.icon_glocke_grau {
        display: none;
    }

    section.stornierung .grid-container-5 {
        grid-template-areas: 'cont-1' 'cont-2' 'cont-3' 'cont-4' 'cont-5';
        grid-template-columns: auto;
    }

    div.angebotskonditionen section.offers .offers-content-row.gesamtpreis .price .col1 {
        float: left;
        padding-left: 12px;
        text-align: left;
    }

    div.angebotskonditionen.bahncard section.offers .offers-content-row .offer {
        width: 100%;
    }

    .bahncard-auswahl .header p {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bahncard-row .bahncard-teaser-content .bc-preis {
        font-size: 12px;
    }

    .bahncard-row .bahncard-teaser {
        padding: 0;
    }

    .bahncard-row .bahncard-teaser-content {
        border-radius: 0;
    }

    .bahncard-row .bahncard-teaser-content .bc-preis {
        bottom: 18px;
    }

    .bahncard-row .bahncard-teaser-content.business .bc-preis {
        position: absolute;
    }

    .bahncard-row .bahncard-teaser-content .bc-button {
        width: calc(100% - 20px);
    }

    .bahncard-row .bahncard-teaser-content.business .bc-icon {
        margin-bottom: 60px;
    }

    .container-980.button-wrapper.bcauswahl div.button-section section.options .btn {
        margin-bottom: 16px;
    }

    .container-980.button-wrapper.bcauswahl .kamin.warenkorb .preiscontainer .price.col2 {
        max-width: none;
    }

    section.bahncard-reiseversicherung .fs-content {
        padding-top: 8px;
    }

    .content.bestaetigung .bc-header a.form-link span {
        padding-left: 22px;
    }

    .content.bestaetigung .bc-header a.form-link .ico.icon-arrow-right {
        left: 0;
    }

    .content.bestaetigung section.mobile-teaser.tipp .step.span-zweidrittel ul li {
        padding-left: 0;
    }

    .content.bestaetigung section.mobile-teaser .dbnavigator {
        margin-left: 0;
    }

    /* Layer */
    div.overlay-content.zustellart-layer h3,
    div.overlay-content.zustellart-layer h4 {
        padding-left: 0;
    }

    div.overlay-content.zustellart-layer .flex-container-steps {
        padding: 0;
    }

    div#adresseval-modallayer-layer-content section.options .btn {
        width: 100%;
    }

    div#adresseval-modallayer-layer-content .fieldset-inner:last-child {
        padding-bottom: 0;
    }

    .overlay-content.reisedaten {
        padding: 30px 10px 20px;
    }

    .overlay-content.reisedaten .grid-container-2.grid-header {
        display: none;
    }

    .overlay-content.reisedaten .grid-content span {
        padding: 8px 0;
    }

    .overlay-content.reisedaten .grid-content span.title {
        display: block;
        font-family: "DBScreenSansBold", "DBSansBold", "Arial", "Helvetica", sans-serif;
        padding-bottom: 4px;
    }

    .overlay-content.reisedaten .grid-container-2 .preisdetails.span_2 {
        grid-column-start: 1;
    }

    .overlay-content.reisedaten .grid-container-2 .preisdetails {
        padding-top: 0;
    }

    .overlay-content.reisedaten .grid-container-2 {
        column-gap: 20%;
    }

    .overlay-content .teilpreis .headline .ico {
        display: none;
    }

    .overlay-content .teilpreis .verbindung {
       margin-left: 0;
    }

    .overlay-content .teilpreis .verbindung .grid-container-3 {
        grid-template-areas:
            "area-2"
            "area-3";
        grid-template-columns: 100%;
    }

    .overlay-content .teilpreis .verbindung .grid-container-3.grid-header {
        display: none;
    }

    .overlay-content .teilpreis .verbindung .grid-container-3 .title {
        display: block;
        padding-bottom: 8px;
        color: #646973;
    }

    .overlay-content .teilpreis .verbindung .grid-container-3 .grid-area-3 {
        padding-top: 10px;
    }

    .overlay-content .teilpreis h4.fahrtrichtung {
        display: block;
        margin-left: 0;
        padding-top: 20px;
    }

    section.verbundprodukt fieldset .fs-header {
        padding: 16px;
    }

    .weccalendar {
        width: 281px;
    }

    .weccalendar .left {
        width: 219px;
    }

    .weccalendar input.date {
        width: 151px;
    }

    section.verbundprodukt fieldset h3 {
        margin-left: 0;
    }

    section.header.fahrradkarte-hinweis {
        min-height: auto;
    }

    /* Pauschalpreis-Angebote */
    .angebotsauswahl .angebotsauswahl-ticket:after,
    .angebotsauswahl .angebotsauswahl-ticket:before {
        display: none;
    }

    .inner-container.clearfix label:after {
        left: 0;
        width: 100vw;
    }

    .angebotsauswahl .fs-header .klasse input[type="radio"] + label,
    .angebotsauswahl .fs-header .klasse input[type='radio']:checked + label {
        background-position-x: 0;
    }

    .angebotsauswahl .fs-header .klasse label {
        padding-left: 34px;
    }

    .angebotsauswahl .fs-header .klasse label.single-selection {
        padding-left: 0;
    }

    .angebotsauswahl .weccalendar {
        width: 281px;
    }

    .angebotsauswahl .weccalendar .left {
        width: 219px;
    }

    .angebotsauswahl .weccalendar input.date {
        width: 151px;
    }

    .angebotsauswahl .weccalendar img.cal_button_earlier,
    .angebotsauswahl .weccalendar img.cal_button_later {
        margin: 1px;
    }

    .angebotsauswahl .fs-header .klasse label:not(:last-child) {
        padding-right: 8px;
    }

    .angebotsauswahl .fs-header .custom-select {
        width: 100%;
    }

    .angebotsauswahl .fs-header .custom-select.no-border {
        margin-bottom: 0px;
    }

    #pauschalpreis-angebote-container div.option-link {
        margin-left: 16px;
    }

    #pauschalpreis-angebote-container div.option-link .icon-icon_trash_grey {
        margin-left: -16px;
    }

    #pauschalpreis-angebote .header-link input {
        padding-left: 12px;
    }

    /* Geschenkgutscheine */
    .geschenkgutscheinmotiveTable .vorschau-container {
        width: 50%;
    }

    .geschenkgutscheinmotiveTable .vorschau-container .geschenkgutscheinmotiv.vorschau-icon {
        display: none;
        pointer-events: none;
    }

    .geschenkgutscheinmotiveTable .vorschau-container .geschenkgutscheinmotiv.icon {
        pointer-events: none;
    }

    /* Meine Bahn */
    #hauptseite-grid .additional-services .grid-area {
        background-image: url(../img/icon/20dp_icon_navigation_chevron-right.svg);
        background-repeat: no-repeat;
        background-position: right 16px top 22px;
    }

    #hauptseite-grid .grid-title {
        padding-left: 16px;
    }

    #hauptseite-grid .grid-area .button-abschnitt .btn {
        width: 100%;
    }

    #hauptseite-grid .links-area .icon {
        background-image: none;
    }

    #hauptseite-grid .links-area .grid-area h5 {
        padding-left: 0;
    }

    #hauptseite-grid .bc-punkte-grid .row.statuspunkte-row {
        display: block;
    }

    #hauptseite-grid .bc-punkte-grid .row {
        margin-top: 16px;
    }

    #hauptseite-grid .bc-punkte-grid .title-cell {
        flex: 0 0 116px;
    }

    #hauptseite-grid .bc-punkte-grid .row.statuspunkte-row .data-cell {
        padding-right: 0;
        text-align: left;
    }

    .payment-3d-error {
        padding-left: 16px;
    }

    /* Fahrgastrechte */
    .fahrgastrechte {
        padding-left: 10px;
        padding-right: 10px;
    }

    .fahrgastrechte h3, .fahrgastrechte h4 {
        padding-right: 30px;
    }

    .fahrgastrechte fieldset .fs-header input[type='radio'] + label,
    .fahrgastrechte fieldset .fs-header input[type='radio']:checked + label,
    .fahrgastrechte fieldset .fs-header input[type="checkbox"] + label {
        background-position-x: 16px;
        padding-right: 20px;
        padding-left: 56px;
    }

    .fahrgastrechte section.registrierung .fieldset-inner {
        padding: 16px 20px;
    }

    .fahrgastrechte .fgr-content-wrapper .title-content,
    .fahrgastrechte .fgr-content-wrapper .fgr-content {
        flex-wrap: wrap;
    }

    .fahrgastrechte .fgr-content-wrapper .fgr-content,
    .fahrgastrechte .fgr-content-wrapper .fgr-content.fgr-content-margin-top {
        margin-top: 10px;
    }

    .fahrgastrechte .fgr-content-wrapper .title-content h3 {
        order: -1;
    }

    .fahrgastrechte .fgr-content-wrapper .fgr-content i {
        order: 1;
    }

    .fahrgastrechte .fgr-content-wrapper .title-content .icon-placeholder,
    .fahrgastrechte .fgr-content-wrapper .title-content i.icon,
    .fahrgastrechte .fgr-content-wrapper .fgr-content .icon-placeholder,
    .fahrgastrechte .fgr-content-wrapper .fgr-content i.icon,
    .fahrgastrechte .fgr-content-wrapper .title-content h3,
    .fahrgastrechte .fgr-content-wrapper .fgr-content .text-content {
        width: 100%;
    }

    .fahrgastrechte input[type="radio"] + label.hide-radio,
    .fahrgastrechte input[type="radio"]:checked + label.hide-radio {
        padding-left: 20px;
    }

    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column.ankunftszeit-angabe {
        flex-wrap: wrap;
        width: 100%;
    }

    .fahrgastrechte .ankunftszeit-container fieldset .fieldset-inner,
    .fahrgastrechte .fgr-nebenbeleg-upload fieldset .fieldset-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .fahrgastrechte .weccalendar {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .fahrgastrechte .fgr-nebenbeleg-verkehrsmittel-abbruchbhf {
        padding-left: 20px;
        padding-right: 20px;
    }

    .fahrgastrechte .fgr-nebenbeleg-upload .btn.grey {
        width: 100%;
    }

    .fahrgastrechte .fgr-nebenbeleg-upload .flex-container {
        flex-wrap: wrap;
    }

    .fahrgastrechte .fgr-nebenbeleg-upload .flex-container-data-column {
        width: 100%;
    }

    .fahrgastrechte .fgr-nebenbeleg-upload .flex-container-data-column.currency-field {
        margin-left: 0;
    }

    .fahrgastrechte #filepond-content {
        border: 1px solid lightgrey;
        padding: 16px 16px 8px 16px;
    }

    .fahrgastrechte #filepond-content .file-group {
        flex-wrap: wrap;
    }

    .fahrgastrechte #filepond-content .file-group .filepond--root.filepond--hopper {
        width: 100%;
        margin-top: 20px;
    }

    .fahrgastrechte #filepond-content .file-group .inner-left {
        margin-left: 0;
        width: 100%;
        order: -1;
    }

    .fahrgastrechte #filepond-content .file-group .inner-left .row:first-child {
        padding-top: 0;
    }

    .fahrgastrechte #filepond-content #kein-beleg-hinweis,
    .fahrgastrechte #filepond-content .file-group {
        padding-bottom: 8px;
    }

    .fahrgastrechte section.fgr-nebenbeleg-upload .errormsg.http-error {
        padding-top: 16px;
    }

    .fahrgastrechte #filepond-content .file-group a.delete {
        right: 20px;
    }

    .fahrgastrechte .fahrplan-container .flex-container .flex-container-data.pull-right {
        display: flex;
        flex-wrap: wrap;
    }

    .fahrgastrechte .fahrplan-container fieldset .fieldset-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .fahrgastrechte .fahrplan-container .flex-container .flex-container-data.inner-left.pull-right {
        flex-shrink: 1;
        width: auto;
    }

    .bcdaten .kamin.header-with-contentfenster {
        width: 90%;
        left: 16px
    }

    #breadcrumb {
        margin-left: 16px;
    }

    /* Buchungsrückschau */
    fieldset.brs-fieldset .fs-header input[type="radio"] + label,
    fieldset.brs-fieldset .fs-content-brs  {
        padding-left: 50px;
    }

    section.brs-filter .date-container .error-container {
        max-width: none;
        margin-right: 16px;
    }

    section.brs-uebersicht .grid-container-5,
    section.brs-uebersicht .grid-container-5.gk {
        grid-template-areas:
                'cont-1 cont-5'
                'cont-2 cont-5'
                'cont-3 cont-5'
                'cont-4 cont-5';
        grid-template-columns: auto 24px;
    }

    section.brs-uebersicht .grid-container-5 .container-3 .fk-compound-info {
        padding-top: 0;
    }

    section.brs-uebersicht .grid-container-5.gk .container-4 {
        padding-top: 8px;
    }

    .container-940 .brs-uebersicht-header h3 {
        margin-right: 0;
    }

    .container-940 .brs-uebersicht-header + p.hinweis {
        padding: 0 16px;
    }

    fieldset .fs-content.fs-content-brs .container-380,
    fieldset .fs-content.fs-content-brs .date-container .pull-left,
    section.brs-filter .button-section .btn {
        width: 100%;
    }

    fieldset .fs-content.fs-content-brs .date-container + div.button-section {
        width: 100%;
        padding-left: 0;
    }

    section.brs-uebersicht .grid-container-5 .container-2,
    section.brs-uebersicht .grid-container-5 .container-3 {
        padding-top: 4px;
    }

    section.brs-uebersicht .grid-container-5 .container-2 > span.title,
    section.brs-uebersicht .grid-container-5 .container-2 .fk-compound-info > span.title,
    section.brs-uebersicht .grid-container-5 .container-2 > span.label,
    section.brs-uebersicht .grid-container-5 .container-2 .fk-compound-info > span.label,
    section.brs-uebersicht .grid-container-5 .container-3 > span.title,
    section.brs-uebersicht .grid-container-5 .container-3 > span.label {
        display: inline;
    }

    section.brs-uebersicht .grid-container-5 .container-2 > span.label,
    section.brs-uebersicht .grid-container-5 .container-2 .fk-compound-info > span.label,
    section.brs-uebersicht .grid-container-5 .container-3 > span.label {
        padding-left: 8px;
    }

    section.brs-uebersicht .grid-container-5 .container-3 .fk-compound-info {
        padding-top: 4px;
    }

    section.hinweis {
        padding: 16px;
    }

    /* Auftragdetails */
    section.auftragdetails .grid-container-5 {
        grid-template-areas:
            'cont-1 cont-5'
            'cont-2 cont-2'
            'cont-3 cont-3'
            'cont-4 cont-4';
        grid-template-columns: 50% 50%;
    }

    section.auftragdetails .grid-container-5 .container-1 .icon-icon_reisender {
        display: none;
    }

    section.auftragdetails .grid-container-5 .container-1 {
        padding-right: 8px;
    }

    section.auftragdetails .grid-container-5 .container-2,
    section.auftragdetails .grid-container-5 .container-3 {
        padding-top: 12px;
        padding-right: 0;
    }

    section.auftragdetails .grid-container-5 .container-4 {
        padding-top: 8px;
        padding-right: 0;
    }

    section.auftragdetails .grid-container-5 .container-5 {
        padding-top: 0;
    }

    div.auftrag a.printlink.form-link {
        margin-right: 16px;
    }

    section.box-section .icon-and-text-wrapper .button-abschnitt,
    section.box-section .icon-and-text-wrapper .button-abschnitt input,
    section.box-section .icon-and-text-wrapper .button-abschnitt a.btn {
        width: 100%;
    }

    section.box-section .icon-and-text-wrapper .button-abschnitt {
        padding-left: 0;
    }

    section.box-section .icon-and-text-wrapper {
        gap: 16px;
    }

    section.box-section .icon-and-text-wrapper .left-container,
    section.box-section.withKorrekturBeleg .icon-and-text-wrapper .left-container,
    section.box-section.kaufbeleg-bestaetigung .icon-and-text-wrapper .left-container {
        max-width: unset;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico {
        width: 20px;
        margin-right: 8px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_reiseplan {
        background: url(../img/icon/ic-db_maps_map_20.svg) no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_erneut_buchen {
        background: url(../img/icon/icon-icon_navigation_refresh_20.svg) no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_fgr_einreichen {
        background: url(../img/icon/ic-db_action_legal_20.svg) no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_document {
        background: url('../img/icon/icon-icon_document_20.svg') no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_ticket_reiseplan {
        background: url('../img/icon/icon-icon_ticket_timetable_20.svg') no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_sitzplatz_not_available {
        background: url('../img/icon/icon-icon_sitzplatz_not_available_20.svg') no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_ticket {
        background: url('../img/icon/icon-icon_ticket_20.svg') no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_action_download {
        background: url('../img/icon/icon-icon_action_download_20.svg') no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.box-section .icon-and-text-wrapper .left-container .ico.icon-icon_mobile_phone {
        background: url('../img/icon/icon-icon_mobile_phone_20.svg') no-repeat center;
        width: 20px;
        height: 20px;
    }

    section.hinweis .button-section .btn {
        width: 100%;
    }

    /* BRS Details Auftragsdaten */
    .brsDetailsTable .grid-container-2 {
        grid-template-areas:
        'cont-1'
        'cont-2';
        grid-template-columns: 100%;
    }

    .brsDetailsTable .grid-container-3 {
        grid-template-areas:
        'cont-1'
        'cont-2'
        'cont-3';
        grid-template-columns: 100%;
        gap: 0;
    }

    .brsDetailsTable .grid-container-4 {
        grid-template-areas:
        "cont-1"
        "cont-2"
        "cont-3"
        "cont-4";
        grid-template-columns: auto;
    }

    .brsDetailsTable .grid-container-5 {
        grid-template-areas:
        "cont-1 cont-1"
        "cont-2 cont-2"
        "cont-3 cont-3"
        "cont-4 cont-5";
        grid-template-columns: auto min-content;
    }

    .brsDetailsTable .row .cont-1,
    .brsDetailsTable .row .cont-2,
    .brsDetailsTable .row .cont-3 {
        padding-bottom: 8px;
    }

    .brsDetailsTable .row .belegnr {
        text-align: left;
    }

    .brsDetailsBaustein div.storno-fehler {
        padding-left: 16px;
    }

    .wrapper.responsive .content .brsDetailsBaustein h4 {
        gap: 8px;
    }

    .wrapper.responsive .content .brsDetailsBaustein h4 .icon-icon_storno,
    section.box-section .icon-and-text-wrapper .left-container .icon-icon_storno {
        background: url(../img/icon/ic-db_action_undo_20.svg) no-repeat center;
        width: 20px;
        height: 20px;
    }

    .wrapper.responsive .content .brsDetailsBaustein h4 .icon-icon_storno_lighter {
        background: url(../img/icon/ic-db_action_undo_20_lighter.svg) no-repeat center;
        width: 20px;
        height: 20px;
    }

    .wrapper.responsive .content .brsDetailsBaustein h4 .icon-icon_storno_ausgeschlossen {
        background: url(../img/icon/ic-db_action_block_20.svg) no-repeat center;
        width: 20px;
        height: 20px;
    }

    .brs-storno-default,
    .brs-storno-content > p {
        max-width: unset;
    }

    .brs-storno-box .brs-storno-content.indent-content,
    .brs-storno-box .brs-storno-content {
        padding-left: 44px;
    }

    .brs-storno-default .grid-container-2 {
        display: block;
    }

    .brs-storno-default.withButton .grid-container-2 .cont-2 .btn.darksilver,
    .brs-storno-hinrueck .grid-container-hr-2 .cont-2 .btn.darksilver,
    .brs-storno-hinrueck .grid-container-3.withButton .cont-3 .btn.darksilver {
        width: 100%;
    }

    .brs-storno-default.withButton .grid-container-2 .button-abschnitt,
    .brs-storno-hinrueck .grid-container-hr-2 .button-abschnitt,
    .brs-storno-hinrueck .grid-container-3.withButton .button-abschnitt {
        margin-left: -28px;
    }

    .brs-storno-hinrueck .grid-container-hr-2 .cont-2 {
        margin-left: -34px;
    }

    .brs-storno-hinrueck .grid-container-3 {
        display: block;
        padding-left: 28px;
    }

    .brs-storno-hinrueck .grid-container-3.withButton {
        padding-left: 0;
    }

    .brs-storno-hinrueck .grid-container-3 .cont-3 {
        padding-top: 8px;
    }

    .brs-storno-hinrueck .grid-container-3 .cont-1,
    .brs-storno-hinrueck .grid-container-3 .cont-2 {
        padding-right: 30px;
    }

    .brs-storno-hinrueck .row:last-child {
        padding-top: 8px;
        padding-bottom: 16px;
    }

    .brs-storno-hinrueck .grid-container-3.withButton:not(:last-of-type) {
        padding-bottom: 8px;
    }

    .brs-storno-hinrueck .row.withButton:last-child {
        padding-bottom: 0;
    }

    .confirmation-header.rva-olt {
        text-align: left;
    }

    .confirmation-header.rva-olt a.btn {
        width: 100%;
    }

    .verbundprodukt section.box-section .icon-and-text-wrapper .left-container {
        padding-right: 0;
    }

    .verbundprodukt section.box-section .icon-and-text-wrapper .left-container .price {
        float: right;
    }

    fieldset .nested-radio-block {
        padding-left: 40px;
    }

    .lastschrift-standalone section.ls-abmelden,
    .erstattung-kasse section.lastschrift fieldset .fs-content.withicon {
        padding-left: 16px;
    }

    .flex.hinweis,
    .erstattung-pruef .versand-hinweis {
        margin-left: 16px;
    }

    .flex-item-left {
        margin-right: 16px;
    }

    .brsDetailsTable.erstattung .grid-container-3,
    .brsDetailsTable.erstattung.erstattungsart-kk .grid-container-3 {
        grid-template-areas:
        'cont-1'
        'cont-2'
        'cont-3';
        grid-template-columns: 100%;
        gap: 16px;
    }

    .erstattungsantrag fieldset .fs-header input[type="checkbox"] + label,
    .erstattungsantrag fieldset .fs-header input[type="radio"] + label {
        padding-right: 0;
    }

    section.pers-hinweis,
    section.header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lastschrift-standalone .agb p.indent {
        padding-left: 0;
    }

    section.kreditkarten-uebersicht .div-table .kk-data .kk-typ {
        font-size: 14px;
    }

    section.kreditkarten-uebersicht .div-table-cell {
        padding: 8px 8px 8px 16px;
    }

    section.kreditkarten-uebersicht .div-table .kk-options .kk-options-button.favorite {
        float: right;
    }

    section.kreditkarten-uebersicht .div-table .kk-options .kk-options-button {
        padding-bottom: 16px;
        padding-top: 8px;
    }

    section.kreditkarten-uebersicht .div-table .kk-options .kk-options-button:last-child {
        padding-bottom: 4px;
    }

    section.kreditkarten-uebersicht .div-table .kreditkarte-image {
        width: 92px;
    }

    section.kreditkarten-uebersicht .div-table .kk-options {
        width: 68px;
    }

    section.kreditkarte.disabled #kk-aufklapper .hint {
        position: relative;
        margin-left: 38px;
        padding-top: 0;
        padding-bottom: 8px;
    }

    /* DateRangePicker Spezialfälle */

    .daterangepicker {
        border-radius: 0;
    }

    .daterangepicker:before {
        left: 30px;
    }

    .daterangepicker:after {
        left: 31px;
    }

    .daterangepicker .drp-calendar.left .calendar-table table:before {
        display: none;
    }

    .daterangepicker .drp-calendar {
        flex: 1 100%;
        width: 100%;
        margin: 0;
    }

    .daterangepicker .drp-buttons {
        padding: 16px;
    }

    .daterangepicker .drp-buttons .drp-selected, .daterangepicker .drp-buttons .btn {
        width: 100%;
        display: block;
        margin-bottom: 16px;
        margin-left: 0;
    }

    .daterangepicker .drp-buttons .btn:last-child {
        margin-bottom: 0;
    }

    /* BC Ersatzkarte */
    .bahncard-ersatzkarte .container-700 {
        margin-left: 16px;
    }

    div.bahncard-ersatzkarte section.agb.bx-shadow {
        padding: 0;
    }

    /* BC Ersatzkarte */
    section.bc-ersatzkarte-auswahl .grid-container-5 {
        grid-template-areas:
                'cont-1'
                'cont-2'
                'cont-3'
                'cont-4'
                'cont-5';
        grid-template-columns: auto;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .container-5 {
        padding-top: 16px;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .container-5 input {
        width: 100%;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .details,
    section.bc-ersatzkarte .grid-container-5 .details {
        display: flex;
        align-items: baseline;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .details span.title,
    section.bc-ersatzkarte .grid-container-5 .details span.title {
        width: 150px;
    }

    .upsell h3.firstclass {
        margin-left: 0;
        margin-right: 0;
    }

    #shopcontent .portalcontentleft {
        width: 100%;
        float: none;
        margin: 0;
    }

    #shopcontent .portalcontentcenter {
        width: 100%;
        float: none;
        margin: 0;
    }

    #content.bestaetigung #shopcontent .portalcontentcenter {
        width: 100%;
    }

    #shopcontent .portalcontentright {
        width: 100%;
    }

    /* Bei kleinem Webview Bilder ausblenden */
    #shopcontent .portalcontentcenter table td img {
        display: none;
    }

    #shopcontent.maincontent {
        margin: 0;
    }
}

@media (max-width: 490px) {
    .fahrgastrechte .fahrplan-container .flex-container .flex-container-data.pull-right > div {
        width: 100%;
    }

    .fahrgastrechte .fahrplan-container .flex-container .flex-container-data.pull-right > div:not(:first-child) {
        margin-top: 16px;
    }

    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column.ankunftszeit-angabe > div {
        width: 100%;
    }

    .fahrgastrechte .ankunftszeit-container .flex-container .flex-container-data-column.ankunftszeit-angabe > div:first-child {
        margin-top: 0;
    }

    section.bc-ersatzkarte-auswahl .grid-container-5 .details span.title,
    section.bc-ersatzkarte .grid-container-5 .details span.title {
        width: 97px;
    }

    .reisedaten-header .connection span {
        display: block;
    }

    .reisedaten-header .traveller-data {
        margin-top: 8px;
    }
}

@media (max-width: 400px) {
    table.form.shop .col1 {
        max-width: 140px;
    }
    table.form.shop td input, table.form.shop td select {
        max-width: 220px;
    }
}

@media (max-width: 360px) {
    #doc.responsive #content table.form.shopwarenkorb th,
    #doc.responsive #content table.form.shopwarenkorb td,
    #doc.responsive #content table.form.shopwarenkorb .col2 input {
        max-width: 88px;
    }

    table.form.shop td input, table.form.shop td select {
        max-width: 160px;
    }
}