/* ============================================================
   InnoCigs Retourenportal — Design angelehnt an InnoCigs 2.0
   (Shop-Style-Guide: Manrope, Blau #1f5aa8, CTA-Grün #55a16d,
   Pill-Buttons, Karten-Radius 18px). Nur Optik — alle
   funktionalen Klassen (.shown/.show/.active/.error_row,
   Bootstrap-Validierung) bleiben unverändert erhalten.
   ============================================================ */

:root{
    --blue:#1f5aa8;
    --blue-dark:#16448a;
    --blue-deep:#123a78;
    --blue-tint:#eaf1fb;
    --blue-tint-2:#dbe7f8;
    --blue-150:#bcd5f5;
    --blue-600:#2f6fc0;
    --blue-logo:#1f6cb5;
    --blue-logo-dark:#16457f;
    --blue-logo-light:#3f8fd4;
    --green:#55a16d;
    --green-dark:#498a5e;
    --green-text:#509766;
    --white:#ffffff;
    --ink:#1d232b;
    --ink-soft:#39424d;
    --muted:#6b7480;
    --muted-2:#9aa2ad;
    --line:#e7eaef;
    --line-strong:#d6dbe2;
    --bg:#ffffff;
    --bg-soft:#f6f8fb;
    --bg-soft-2:#eef1f5;
    --red:#e0476b;
    --red-dark:#b3324f;
    --red-bg:#fdedf0;
    --red-border:#f1b9c8;
    --card-radius:18px;
    --btn-radius:999px;
    --shadow-sm:0 1px 2px rgba(20,30,45,.06);
    --shadow:0 10px 24px -14px rgba(20,30,45,.22);
    --shadow-lg:0 24px 60px -22px rgba(15,25,40,.35);
    --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

body {
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img{
    height:auto;
    max-width:100%;
    vertical-align:middle;
    border:0;
}

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.container {
    margin-right:auto;
    margin-left:auto;
}

h1 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ============================================================
   HEADER (Marke) + NAVIGATION
   ============================================================ */
.site-head {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.head-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 15px;
}

.brand-logo-svg { display:inline-flex; align-items:center; line-height:0; }
.brand-logo-svg svg { height:46px; width:auto; display:block; }
.brand-logo-svg .st0 { fill: var(--blue-logo); }
.brand-logo-svg .st1 { fill: var(--blue-logo-dark); }
.brand-logo-svg .st2 { fill: var(--blue-logo-light); }

.head-badge {
    align-self: center;
    background: var(--blue-tint);
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .brand-logo-svg svg { height: 34px; }
    .head-badge { font-size: 11px; padding: 6px 10px; }
}

/* Blaue Nav-Leiste (volle Breite, Inhalt im .container) */
.top_bar_band {
    background: var(--blue);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.top_bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 52px;
    padding: 0 15px;
}

.top_nav { display:inline-block; }
.top_nav:hover { background-color: transparent; }

.top_navlink {
    display: inline-flex;
    align-items: center;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 14px;
    height: 52px;
    line-height: 52px;
    transition: background .14s;
}

.top_navlink:hover {
    text-decoration: none;
    color: var(--white);
    background: var(--blue-dark);
}

.login_link {
    margin-left: auto;
    float: none;
    display: inline-block;
    border-radius: var(--btn-radius);
    background-color: var(--green);
    border: none;
    font-size: 13px;
    font-weight: 800;
    padding: 0;
    transition: background .15s;
}

.login_link a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 9px 18px;
}

.login_link a:hover { text-decoration: none; color: var(--white); }
.login_link:hover { background-color: var(--green-dark); border: none; }

.shop_link {
    float: none;
    display: inline-block;
    border-radius: var(--btn-radius);
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.55);
    margin: 0 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    transition: background .15s;
}

.shop_link a { color: var(--white); }
.shop_link a:hover { text-decoration: none; color: var(--white); }
.shop_link:hover { background: rgba(255,255,255,.14); }

@media (max-width: 700px) {
    .top_bar { padding: 6px 10px; }
    .top_navlink { height: 42px; line-height: 42px; padding: 0 10px; font-size: 12px; }
    .login_link a { padding: 8px 14px; }
    .shop_link { padding: 6px 12px; }
}

/* ============================================================
   SEITENINHALT
   ============================================================ */
.pagecontent{
    margin: 34px auto 0 auto;
    width: 100%;
    max-width: 980px;
    min-height: 60vh;
    padding: 0 15px;
}

/* Seitentitel (snippetWelcome) */
.rp_bigtext {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: 10px;
    color: var(--ink);
}

#pagelet > .rp_bigtext:first-child {
    font-size: 30px;
}

.rp_intro {
    text-align: center;
    font-size: 15px;
    color: var(--muted);
    margin-top: 6px;
}

/* Karten-Container */
.inner_container {
    background-color: var(--white);
    color: var(--ink);
    border-radius: var(--card-radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    margin: 18px auto 0;
    padding: 28px;
}

@media (max-width: 560px) {
    .inner_container { padding: 18px 14px; }
}

.rp_step {
    padding: 5px;
    background-color: var(--bg-soft-2);
    cursor: pointer;
}

/* Prozess-Grafik + Trennlinien in den Pagelets */
#pagelet > img {
    display: block;
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid var(--line);
}

#pagelet hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 10px 0;
}

.sectionText { margin: 10px; }
.content_text { margin-top: 20px; margin-bottom: 20px; }
.text_top { text-align: center; font-size: 16px; font-weight: 600; color: var(--ink-soft); }

/* ============================================================
   BUTTONS — Pill-Form wie im Shop
   Standard = Outline (btn-ghost), primäre Aktionen = Grün.
   ============================================================ */
a.rp_button,
a.rp_button_hard {
    display: inline-block;
    padding: 13px 22px;
    margin: 0;
    font-size: 15px;
    color: var(--white);
    font-weight: 800;
    background-color: var(--green);
    border-radius: var(--btn-radius);
    border: none;
    transition: .16s;
    line-height: 1.15;
}

a.rp_button:hover,
a.rp_button_hard:hover {
    text-decoration: none;
    color: var(--white);
    background-color: var(--green-dark);
    transform: translateY(-1px);
}

a.rp_button_hard {
    box-sizing: border-box;
    height: auto;
    overflow: visible;
    width: 100%;
    text-align: center;
}

.buttonbox {
    width: calc(100% / 3);
    padding: 5px;
    display: inline-block;
    box-sizing: border-box;
}

.center_buttons { text-align: center; width: 100%; }
.center_button { display: inline-block; }

/* Grundform: Outline-Pill (wie .role-btn / .btn-ghost im Shop) */
.center_button a,
.center_button button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.15;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--btn-radius);
    padding: 13px 30px;
    margin: 6px 5px;
    background-color: var(--white);
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}

.center_button a:hover,
.center_button button:hover {
    text-decoration: none;
    color: var(--blue);
    border-color: var(--blue);
    background-color: var(--blue-tint);
}

/* Primäre Aktionen: gefülltes CTA-Grün */
.center_button button[type="submit"],
.center_button button.login-button,
.center_button a[data-tgt="productStep"],
.center_button a[data-tgt="productStepK1"],
.center_button a[data-tgt="finishRetoure"],
.center_button a[data-tgt="finishGarantie"],
.center_button a[data-tgt^="proceed"] {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.center_button button[type="submit"]:hover,
.center_button button.login-button:hover,
.center_button a[data-tgt="productStep"]:hover,
.center_button a[data-tgt="productStepK1"]:hover,
.center_button a[data-tgt="finishRetoure"]:hover,
.center_button a[data-tgt="finishGarantie"]:hover,
.center_button a[data-tgt^="proceed"]:hover {
    background-color: var(--green-dark);
    border-color: var(--green-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(73,138,94,.7);
}

/* Löschen-X in der Warenkorb-Tabelle */
.center_line_button { display: inline-block; }

.center_line_button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background-color: var(--white);
    transition: .14s;
}

.center_line_button a:hover {
    text-decoration: none;
    color: var(--white);
    border-color: var(--red);
    background-color: var(--red);
}

/* ============================================================
   FORMULARE
   ============================================================ */
label { font-weight: 700; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
.labelwidth > label { font-weight: 700; }

.form-control {
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    height: auto;
    padding: 11px 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--btn-radius);
    background-color: var(--white);
    transition: border-color .14s, box-shadow .14s;
}

.form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint-2);
    outline: none;
}

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 42px;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }

.form-minimal { width: auto; }

textarea#customerMsg,
textarea#customDocumentnumber {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    padding: 12px 18px;
    min-height: 90px;
    border: 1.5px solid var(--line-strong);
    border-radius: 16px;
    background: var(--white);
    transition: border-color .14s, box-shadow .14s;
}

textarea#customerMsg:focus,
textarea#customDocumentnumber:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint-2);
    outline: none;
}

textarea#customDocumentnumber { min-height: 52px; }
.customerMsg { margin-top: 10px; }

input[type="file"] { font-family: inherit; font-size: 14px; color: var(--ink-soft); }

/* Funktional: Show/Hide der Eingabe-Blöcke (NICHT ändern) */
.selectBlock {
    margin: 14px auto;
    width: 80%;
    position: relative;
    display: none !important;
}

.selectBlock.shown { display: block !important; }

@media (max-width: 700px) {
    .selectBlock { width: 100%; }
}

/* ============================================================
   WARENKORB-TABELLE
   ============================================================ */
table.cartTable {
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

table.cartTable > thead > tr > td {
    background-color: var(--blue);
    color: var(--white);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 11px 12px;
    word-wrap: break-word;
}

table.cartTable tr:nth-child(odd),
table.cartTable tr:nth-child(even) { background: var(--white); }

table.cartTable > tbody > tr:nth-child(even) { background: var(--bg-soft); }

table.cartTable > tbody > tr > td {
    padding: 11px 12px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    vertical-align: middle;
}

table.cartTable > tbody  td:nth-child(1) { width: 10%; text-align: center; }
table.cartTable > tbody  td:nth-child(2) { width: 20%; }
table.cartTable > tbody  td:nth-child(3) { width: 40%; }

.headRow { font-weight: 700; }
.error_row { background-color: var(--red-bg) !important; }

.productList { width: 100%; }
.wd100 { width: 100%; }

/* ============================================================
   SUCHE (Autocomplete)
   ============================================================ */
#searchResults, #searchResultsProduct {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 40;
    display: none;
}

#searchResults.shown, #searchResultsProduct.shown { display: block; }

.searchFound {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    padding: 10px 16px;
    margin-top: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.searchFound:hover {
    background-color: var(--blue-tint);
    border-color: var(--blue-tint-2);
}

/* Funktional: Sichtbarkeits-Toggles (NICHT ändern) */
#productSelectByEan { display: none; }
#productSelectByEan.shown { display: block; }
#productSelectByName { display: none; }
#productSelectByName.shown { display: block; }
#productEan { display: none; }
#productEan.shown { display: block; }
#productSearch { display: none; }
#productSearch.shown { display: block; }
#extDatePlaceFormButton { display: none; }
#extDatePlaceFormButton.shown { display: inline-flex; }
#extLoginForm { display: none; }
#extLoginForm.shown { display: block; }

/* ============================================================
   HINWEISE / ALERTS
   ============================================================ */
.alert {
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    border-radius: 12px;
    padding: 13px 18px;
    border: 1px solid var(--red-border);
    display: none;
}

.alert.shown { display: block; }

.alert-block {
    padding-top: 13px;
    padding-bottom: 13px;
    background-color: var(--red-bg);
    color: var(--red-dark);
    border: 1px solid var(--red-border);
    font-weight: 600;
    font-size: 14px;
}

.alert-error,
.alert-danger {
    color: var(--red-dark);
    background-color: var(--red-bg);
    border: 1px solid var(--red-border);
}

.alert-error:before { content: none; }
.alert ul { list-style-type: none; margin: 0; padding: 0; }

/* ============================================================
   FAQ (Akkordeon)
   ============================================================ */
.collapsible {
    box-sizing: border-box;
    background-color: var(--white);
    color: var(--ink);
    cursor: pointer;
    padding: 15px 18px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-top: 10px;
    text-align: left;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    transition: border-color .14s, background .14s;
}

.collapsible:hover { border-color: var(--blue-tint-2); background: var(--bg-soft); }

.collapsible::before {
    content: "+";
    display: inline-block;
    min-width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: var(--blue-tint);
    color: var(--blue);
    font-weight: 800;
    margin-right: 12px;
    vertical-align: -2px;
}

.collapsible.active {
    border-radius: 12px 12px 0 0;
    border-color: var(--blue-tint-2);
    background: var(--white);
}

.collapsible.active::before { content: "−"; background: var(--blue); color: var(--white); }

.collapsible:focus { outline: none; }

.collapsible_content {
    padding: 0 18px 0 52px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: 1px solid transparent;
    border-top: none;
    color: var(--ink-soft);
    font-size: 14.5px;
}

.collapsible.active + .collapsible_content {
    border-color: var(--blue-tint-2);
    border-radius: 0 0 12px 12px;
}

/* Padding statt Margin: scrollHeight (JS-Akkordeon) zählt Margins nicht mit */
.collapsible_content p { margin: 0; padding: 12px 0 16px; }

/* ============================================================
   KONTAKT-KARTEN
   ============================================================ */
.info_img {
    margin: 26px auto 0;
    display: block;
    width: auto;
    max-height: 52px;
}

.info_box {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    background: var(--white);
    margin: 15px;
}

.info_box_text {
    margin-left: 26px;
    margin-right: 26px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.info_box .rp_bigtext { font-size: 18px; }

/* ============================================================
   MODAL
   ============================================================ */
#modalCover {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(13,23,38,.55);
}

#modalCover.shown { display: block; }

#modalWrap {
    font-size: 15px;
    z-index: 1200;
    width: min(620px, calc(100vw - 28px));
    background-color: var(--white);
    text-align: left;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    max-height: calc(100vh - 40px);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-lg);
}

.modalLeft, .modalRight { display: inline-block; width: 47%; box-sizing: border-box; padding: 5px; vertical-align: top; }
.modalTwoThirds { display: inline-block; width: 64%; box-sizing: border-box; padding: 5px; vertical-align: top; }
.modalOneThird { display: inline-block; width: 32%; box-sizing: border-box; padding: 5px; vertical-align: top; }

.modalCenter { min-height: 60px; padding: 18px 24px; color: var(--ink-soft); }

#modalClose { position: absolute; right: 0; top: 0; }

.modalHead {
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.modalFoot {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--line);
}

.headtext {
    font-weight: 800;
    text-align: left;
    font-size: 17px;
    letter-spacing: -.01em;
    padding-right: 36px;
}

.modalHead a.close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--muted);
    background: var(--bg-soft);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    text-shadow: none;
    transition: .14s;
}

.modalHead a.close:hover { background: var(--bg-soft-2); color: var(--ink); text-decoration: none; }

.btn-close {
    line-height: 32px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    background-color: var(--white);
    font-size: 24px;
    font-weight: bold;
    color: var(--muted);
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    outline: none;
    border-radius: 50%;
}

/* Modal-Buttons: Abbrechen = Outline, Bestätigen (proceed*) = Grün
   (über die globalen .center_button-Regeln oben abgedeckt) */
.modalFoot .center_button a { padding: 11px 24px; }

/* ============================================================
   FOOTER — Markup unverändert, Optik wie InnoCigs 2.0
   ============================================================ */
.footer-1 {
    box-sizing: border-box;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--blue);
    display: flex;
    padding: 18px 0;
}

.footer-1>div img { max-height: 60px; }

.footer-1>div span {
    grid-area: label;
    font-weight: 600;
    font-size: 12.5px;
    text-align: right;
    color: var(--blue-150);
}

@media (max-width: 1023px) {
    .footer-1>div span {
        font-size: 10px;
        text-align: center;
        margin-top: 10px;
    }
}

.ic_logo_footer { display: block; }
.ic_logo_footer img { filter: brightness(0) invert(1); opacity: .92; }

@media (max-width:1110px) {
    .ic_logo_footer { display: none !important; }
}

.col-footer {
    flex: 0 0 17%;
    max-width: 17%;
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: fit-content;
    margin: 15px;
    display: grid;
    grid: "label image"/auto auto;
    justify-items: center;
    align-items: center;
    grid-gap: 10px;
    text-align: center;
    float: left;
}

.footer-2 {
    background: var(--bg-soft);
    box-sizing: border-box;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 0;
    display: block;
}

@media (min-width: 1024px) {
    .footer-2 { padding-left: 30px; }
}

.footer-headline {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px;
}

.footer-headline-2 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: 10px;
}

.footer-text-1 {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    .footer-headline { font-size: 15px; }
    .footer-headline-2 { font-size: 22px; }
    .footer-text-1 { font-size: 12.5px; }
}

.footer-2-wrap { margin-left: 15px; margin-right: 15px; }

.img1 {
    max-width: 86px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px 6px;
    margin: 0 4px 6px 0;
}

@media (min-width: 1200px) {
    .img1 { max-width: 92px; }
}

.footer-links > a {
    color: var(--ink-soft);
    line-height: 185%;
    font-weight: 500;
    font-size: 13.5px;
}

.footer-links > a:hover { color: var(--blue); text-decoration: none; }
.footer_links > a:hover { color: var(--blue); text-decoration: none; }

.footer-3 {
    background-color: var(--bg-soft);
    padding-top: 20px;
    padding-bottom: 30px;
}

.footer_payment {
    margin: 0 auto;
    width: 80%;
    margin-bottom: 20px;
}

.footer_payment .payment_head {
    color: var(--ink);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 165%;
}

.footer_payment .pay_img {
    margin: 5px;
    padding: 5px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.footer-4 {
    padding: 18px 15px 24px;
    box-sizing: border-box;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
}

.f3 a {
    color: var(--ink-soft);
    line-height: 185%;
    font-weight: 500;
}

.f3 a:hover { color: var(--blue); text-decoration: none; }

@media (max-width: 1023px) {
    .footer_mobile_info_header1 {
        padding: 5px;
        color: var(--ink-soft);
        text-align: center;
        margin: 5px;
        font-size: 13px;
    }

    .footer_mobile_info_header1 a { color: var(--ink-soft); font-weight: 500; }

    .footer_mobile_infos_header {
        padding: 11px 14px;
        background-color: var(--white);
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--ink);
        font-weight: 700;
        margin: 8px 5px;
        font-size: 15px;
        cursor: pointer;
    }

    #footer_mobile_switch_infos, #footer_mobile_switch_more {
        display: inline;
        float: right;
        cursor: pointer;
        background-color: transparent;
        color: var(--muted);
    }

    #footer_mobile_switch_infos:after, #footer_mobile_switch_more:after {
        font-weight: 400;
        content: "▼";
    }

    #footer_mobile_infos, #footer_mobile_more {
        display: none;
        padding-left: 20px;
    }
}

.footer_mobile_switch_more, .footer_mobile_switch_infos { cursor: pointer; }

.show { display: block !important; }

.footer_mobile_dhl { text-align: center; margin-top: 25px; }

/* ============================================================
   HELFER (funktional — NICHT ändern)
   ============================================================ */
.cb { clear: both; }
.vspace10 { height: 10px; }
.vspace20 { height: 20px; }
.hspace20 { width: 20px; display: inline-block; }
.mt10 { margin-top: 10px; }
.mt5 { margin-top: 5px; }
.textcenter { text-align: center; }

.hidden-desktop, .visible-phone, .visible-tablet { display: none !important; }

@media (max-width: 1023px) {
    .hidden-desktop { display: inherit !important; }
    .visible-desktop { display: none !important; }
    .visible-tablet { display: inherit !important; }
    .hidden-tablet { display: none !important; }
    .hidden-phone { display: none !important; }
    .visible-phone { display: inherit !important; }
}

.row-fluid { width: 100%; }

@media (max-width: 1023px) and (min-width: 768px) {
    .row-fluid { width: 100%; }
    .row-fluid:after, .row-fluid:before, .row:after, .row:before {
        display: table;
        line-height: 0;
        content: "";
    }
}

.col-xs-4 { width: 33.33%; float: left; }

#customerMsg { width: 100%; }
#customDocumentnumber { width: 100%; }