/* ==== MOBILE HEADER ==== */

#header                         { margin: 10px 15px 30px; }

#header .inside                 { height: 50px; border-radius: 10px; padding: 0 15px; gap: 0; }
#header .inside                 { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }

/* Logo */

#header .logo                   { width: 148px; height: 40px; flex-shrink: 0; }

#header .logo a                 { background-size: 40px 40px, 100px auto; }
#header .logo a                 { background-position: left center, 48px center; }

/* Nav + Desktop-Login ausblenden */

#header .nav                    { display: none; }
#header .button.login           { display: none; }

/* Mobile Buttons einblenden */

#header .mobile_menu            { display: block; margin-left: auto; width: 20px; height: 20px; cursor: pointer; }
#header .mobile_menu            { background: url('img/menu.svg') center/20px no-repeat; }

#header .mobile_login           { display: none; }

/* ==== MOBILE NAV OVERLAY ==== */

#header .nav.open               { position: fixed; top: 0; right: 0; width: 343px; height: 100vh; }
#header .nav.open               { background: #fff; z-index: 9999; padding: 30px; box-sizing: border-box; }
#header .nav.open               { display: block !important; }

/* Backdrop – dunkler Hintergrund links */

#header .nav.open::before       { content: '' !important; position: fixed; top: 0; left: 0; display: block; }
#header .nav.open::before       { width: calc(100vw - 343px); height: 100vh; background: rgba(0, 0, 0, 0.5); pointer-events: none; }

/* Logo oben links */

#header .nav.open::after        { content: '' !important; position: absolute; top: 15px; left: 30px; width: 148px; height: 40px; display: block; }
#header .nav.open::after        { background-image: url('img/logo-icon.svg'), url('img/logo-text.svg'); }
#header .nav.open::after        { background-size: 40px 40px, 100px auto; background-repeat: no-repeat, no-repeat; }
#header .nav.open::after        { background-position: left center, 48px center; }

/* Close-Button */

#header .nav.open .menu_close   { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; }
#header .nav.open .menu_close   { cursor: pointer; font-size: 0; display: block; }

#header .nav.open .menu_close::before { content: '\00d7'; font-size: 24px; color: #4b6584; line-height: 20px; }

/* Menu-Links – vertikal zentriert, links ausgerichtet */

#header .nav.open nav           { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); }

#header .nav.open ul.level_1    { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#header .nav.open ul.level_1    { display: flex !important; flex-direction: column !important; gap: 20px !important; }
#header .nav.open ul.level_1    { align-items: flex-start !important; }

#header .nav.open ul.level_1 a  { font-family: var(--font-family); font-weight: 600; font-size: 16px; }
#header .nav.open ul.level_1 a  { line-height: 30px; color: #4b6584; text-decoration: none; }

#header .nav.open li.active a   { color: #2d98da; }

/* Login-Button (Geschwister-Element) */

#header .nav.open ~ .button.login { display: block !important; position: fixed; bottom: 60px; z-index: 10000; }
#header .nav.open ~ .button.login { right: 30px; width: 283px; box-sizing: border-box; }
#header .nav.open ~ .button.login { background: #fa8231; color: #fff; text-align: center; }
#header .nav.open ~ .button.login { font-family: var(--font-family); font-weight: 600; font-size: 16px; }
#header .nav.open ~ .button.login { line-height: 30px; padding: 5px 20px; border-radius: 5px; text-decoration: none; }

/* ==== MOBILE SLIDER ==== */

#before .cte_slider             { margin: 0 15px 30px; }

.cte_slider .sliderContainer    { height: 480px !important; }
.cte_slider .mask               { height: 480px; }

#before .cte_slider .cte_text    { padding: 30px 20px 0; width: calc(100vw - 30px); height: 480px; overflow: hidden; }
#before .cte_slider .cte_text    { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }

/* Bild – absolut unten zentriert */

.cte_slider .cte_text::before   { left: 50%; top: auto; bottom: -20px; width: 320px; height: 214px; }
.cte_slider .cte_text::before   { transform: translateX(-50%); }

/* Überschrift – Flow */

.cte_slider .cte_text > h2.bh   { position: static; width: 100%; text-align: center; }
.cte_slider .cte_text > h2.bh   { font-size: 30px; line-height: 40px; white-space: normal; margin-bottom: 10px; }

/* Fließtext – Flow */

.cte_slider .cte_text > p:first-of-type { position: static; width: 323px; max-width: 100%; }
.cte_slider .cte_text > p:first-of-type { transform: none; text-align: center; }
.cte_slider .cte_text > p:first-of-type { font-size: 14px; line-height: 20px; }

/* Button – Flow */

.cte_slider .cte_text > p:last-of-type { position: static; margin-top: 15px; text-align: center; }
.cte_slider .cte_text > p:last-of-type { transform: none; padding-bottom: 0; }

/* Nav-Dots */

.cte_slider > .nav              { bottom: 30px; }

/* ==== MOBILE BUSY BOX ==== */

#busy                           { margin: 0 15px 30px; padding: 20px; column-gap: 20px; }
#busy                           { height: 210px; box-sizing: border-box; overflow: hidden; }

#busy h2.bh                     { font-size: 20px; line-height: 30px; margin-bottom: 15px; }

#busy .box                      { width: 80px; }

#busy .box a:first-child         { width: 80px; height: 80px; }

#busy .box img                  { width: 80px; height: 80px; }

/* ==== MOBILE LAYOUT ==== */

#wrapper                        { padding: 0; }
#container                      { grid-template-columns: 1fr; }
#main                           { min-width: 0; overflow: hidden; }

/* ==== MOBILE AGENTLIST ==== */

.agentlist                      { margin: 0 15px 30px !important; overflow: hidden; }

.profile                        { grid-template-columns: 80px 1fr; grid-template-areas: "photo info" "foot foot" "buttons buttons"; }
.profile                        { column-gap: 15px; row-gap: 0; padding: 15px; }

/* Foto */

.profile > a.photo              { width: 80px; height: 80px; }

.profile .img.pic               { width: 80px; height: 80px; }

/* Info – Sterne unter Berater-ID */

.profile > .info                { grid-template-columns: 1fr; }

.profile h3 a                   { font-size: 20px; line-height: 26px; }

.profile .info a.rating         { grid-column: 1; grid-row: auto; justify-self: start; }

.profile .info p.teaser          { font-size: 12px; line-height: 18px; }

/* Buttons – volle Breite unter Info */

.profile > .right.buttons       { flex-direction: column; gap: 4px; }

.profile .right.buttons .button { width: 100%; padding: 8px 15px; font-size: 13px; box-sizing: border-box; }

.profile .right.buttons .chat   { display: flex; }

.profile .tariff                { text-align: center; font-size: 11px; }

.profile .tariff.disable        { display: none; }

/* Foot – direkt am Button */

.profile > .foot                { margin-top: 8px; margin-bottom: 0; font-size: 12px; }

/* Buttons-Bereich – kleiner Abstand nach oben wenn kein Foot */

.profile > .right.buttons       { margin-top: 8px; }

/* Aside auf Mobile ausblenden */

.aside                          { display: none; }

/* ==== MOBILE TARIFE ==== */

#main .cte_tariffs              { grid-template-columns: 1fr; margin: 0 15px 30px; padding: 20px; }
#main .cte_tariffs              { box-sizing: border-box; }

#main .cte_tariffs p            { padding: 0 0 15px; font-size: 10px; line-height: 20px; }

#main .cte_tariffs table        { font-size: 10px; line-height: 20px; }

#main .cte_tariffs th           { font-weight: 600; text-align: left; padding-bottom: 5px; }

#main .cte_tariffs td           { padding: 2px 0; }

/* ==== MOBILE BANNER (Kartenlegen) ==== */

#main .card-background          { padding: 20px !important; min-height: auto !important; margin: 0 15px 30px !important; }
#main .card-background          { border-radius: 10px; background-image: url('img/Karten-mobile.png') !important; }
#main .card-background          { background-size: 360px auto !important; }
#main .card-background          { background-position: center bottom -190px !important; box-sizing: border-box; }

#main .card-background .bh      { font-size: 16px; line-height: 25px; padding-right: 0; margin-bottom: 10px; text-align:left; }

#main .card-background p        { font-size: 13px; line-height: 20px; padding-bottom: 160px; }

/* ==== MOBILE KONTAKTFORMULAR ==== */

.cte_form                          { margin: 0 15px 30px; padding: 20px; border-radius: 10px; box-sizing: border-box; }

.cte_form .row                     { flex-direction: column; gap: 5px; margin-bottom: 15px; }

.cte_form .row label               { width: 100%; font-size: 13px; line-height: 20px; color: #333; }

.cte_form .row label .asterisk     { color: #fa8231; }

.cte_form .row input.text          { width: 100%; height: 36px; border: 1px solid #dbe0e6; border-radius: 5px; }
.cte_form .row input.text          { font-size: 13px; padding: 0 10px; box-sizing: border-box; }

.cte_form .row .textdiv            { width: 100%; }

.cte_form .row textarea            { width: 100%; height: 180px; border: 1px solid #dbe0e6; border-radius: 5px; }
.cte_form .row textarea            { font-size: 13px; padding: 10px; box-sizing: border-box; resize: vertical; }

.cte_form .row.check               { flex-direction: row; gap: 10px; align-items: flex-start; margin-bottom: 15px; padding-left: 0; }

.cte_form .row.check input         { width: 20px; height: 20px; flex-shrink: 0; margin: 0; }

.cte_form .row.check label         { width: auto; flex: 1; font-size: 13px; line-height: 20px; padding: 10px; }

.cte_form .submit_div              { text-align: center; }

.cte_form .submit                  { width: 100%; padding: 5px 20px; border-radius: 5px; border: none; cursor: pointer; margin-left: 0; }
.cte_form .submit                  { background: #fa8231; color: #fff; font-family: var(--font-family); font-weight: 600; }
.cte_form .submit                  { font-size: 16px; line-height: 30px; box-sizing: border-box; }

/* ==== MOBILE FOOTER ==== */

#footer                          { margin: 0 15px 0; }

#footer .inside                  { grid-template-columns: 1fr; grid-template-rows: auto; padding: 20px; }
#footer .inside                  { justify-items: center; text-align: center; }

/* Logo – zentriert */

#footer .logo                    { grid-column: 1; grid-row: 1; width: 148px; height: 40px; margin: 0 auto; }
#footer .logo                    { background-size: 40px 40px, 100px auto; }
#footer .logo                    { background-position: left center, 48px center; }

/* Nav – zentriert, umgebrochen */

#footer .nav                     { grid-column: 1; grid-row: 2; padding-top: 15px; }

#footer .nav li                  { margin: 0 8px; }

/* Social Icons – zentriert */

#footer .social                  { grid-column: 1; grid-row: 3; padding-top: 15px; }

#footer .social a:first-child    { margin-left: 0; }

/* Zahlungsarten – zentriert */

#footer .paymeth                 { grid-column: 1; grid-row: 4; }

#footer .paymeth > div           { gap: 15px; flex-wrap: wrap; }

/* Copyright */

.contribute                     { color: #fff; }