/* BJu Tiere im Glück – Mobile Styles */

/* ==== NAVIGATION (≤ 991px) ==== */
/* CMS-JS toggled bereits .open auf #header .nav — kein eigenes JS nötig */
@media (max-width: 991px) {

/* Hamburger einblenden (leerer Span, Icon via ::before) */
#header .mobile_btn.mobile_menu { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0; margin-left: auto; }
#header .mobile_btn.mobile_menu::before { content: '☰'; font-size: 1.375rem; line-height: 1; color: var(--portal-gray-600); display: block; }
#header .mobile_btn.mobile_menu.active::before { content: '☰'; font-size: 1.375rem; }

/* Mobile Login-Link versteckt lassen — Anmelden steht im Nav */
#header .mobile_btn.mobile_login { display: none; }

/* Nav-Wrapper: margin-left entfernen, als fixed Overlay positionieren */
#header .nav                    { margin-left: 0; position: fixed; top: 78px; left: 0; right: 0; display: none; background: var(--portal-white); border-bottom: 1px solid var(--portal-gray-200); box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 998; max-height: calc(100vh - 78px); overflow-y: auto; overflow-x: hidden; }
#header .nav.open               { display: block; }

/* Schließen-Button im Nav-Overlay */
#header .nav .mobile_close      { display: flex; justify-content: flex-end; padding: 0.75rem 1.5rem 0; cursor: pointer; }
#header .nav .mobile_close::after { content: '✕'; font-size: 1rem; color: var(--portal-gray-400); display: block; }

/* ul.level_1: nur direkte Kinder-Selektoren (> li) um level_2 li nicht zu treffen */
#header .nav ul.level_1         { flex-direction: row; flex-wrap: wrap; padding: 0; gap: 0; }
#header .nav ul.level_1 > li    { flex: 0 0 100%; display: block; padding: 0 1.5rem; box-sizing: border-box; }

/* Normale Nav-Links — CTA-Links (login/kundenanmeldung) explizit ausschließen */
#header .nav ul.level_1 > li:not(:has(> a[href="login"])):not(:has(> a[href="kundenanmeldung"])):not(:has(ul.level_2)) > a { font-size: 1rem; color: var(--portal-gray-700) !important; padding: 0.875rem 0 !important; border-bottom: 1px solid var(--portal-gray-100); border-radius: 0 !important; background: none !important; display: block; }

/* CTA-Buttons: href-basiert + explizite order → immer am Ende, unabhängig von DOM-Position */
#header .nav ul.level_1 > li:has(> a[href="login"]) { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.875rem 0.5rem 1.25rem; border-top: 1px solid var(--portal-gray-100); background: var(--portal-gray-50); box-sizing: border-box; order: 100; }
#header .nav ul.level_1 > li:has(> a[href="kundenanmeldung"]) { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.875rem 0.5rem 1.25rem; border-top: 1px solid var(--portal-gray-100); background: var(--portal-gray-50); box-sizing: border-box; order: 99; }
/* Eingeloggt (anderes href): einziger CTA-Button → volle Breite zentriert */
#header .nav ul.level_1 > li.last:not(:has(ul.level_2)):not(:has(> a[href="login"])):not(:has(> a[href="kundenanmeldung"])) { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem 1.25rem; border-top: 1px solid var(--portal-gray-100); background: var(--portal-gray-50); box-sizing: border-box; order: 100; }
/* Anmelden: primär grün ausgefüllt */
#header .nav ul.level_1 > li > a[href="login"] { width: auto !important; display: inline-flex !important; padding: 0.5rem 1.5rem !important; border-radius: 100px !important; background: var(--portal-primary) !important; color: var(--portal-white) !important; border: none !important; font-weight: 500; }
/* Registrieren: outlined grün */
#header .nav ul.level_1 > li > a[href="kundenanmeldung"] { width: auto !important; display: inline-flex !important; padding: 0.5rem 1.5rem !important; border-radius: 100px !important; background: transparent !important; color: var(--portal-primary) !important; border: 1.5px solid var(--portal-primary) !important; font-weight: 500; }
/* Eingeloggt-Button: primär grün */
#header .nav ul.level_1 > li.last:not(:has(> a[href="login"])):not(:has(> a[href="kundenanmeldung"])) > a { width: auto !important; display: inline-flex !important; padding: 0.5rem 1.5rem !important; border-radius: 100px !important; background: var(--portal-primary) !important; color: var(--portal-white) !important; border: none !important; font-weight: 500; }

/* Aktive Level-1-Seite */
#header .nav ul.level_1 > li.active > a { color: var(--portal-gray-800) !important; font-weight: 600; }

/* Level 2 Nav (Kunden-/Beraterbereich): eingeblendet, eingerückt, ruhiger Subnav-Block */
#header .nav ul.level_1 > li:has(ul.level_2) { }
#header .nav ul.level_1 > li:has(ul.level_2) > a { padding: 0.875rem 1.5rem !important; border-bottom: 1px solid var(--portal-gray-100); background: none !important; border-radius: 0 !important; color: var(--portal-gray-700) !important; font-weight: 400 !important; border-left: none !important; border-right: none !important; border-top: none !important; }
#header .nav ul.level_2                    { display: grid; grid-template-columns: 1fr; gap: 0.25rem; list-style: none; margin: 0; padding: 0.75rem 1rem 1rem; border-bottom: 1px solid var(--portal-gray-200); }
#header .nav ul.level_2 li                 { display: block; padding: 0; }
#header .nav ul.level_2 li a               { display: flex; align-items: center; min-height: 38px; font-size: 0.875rem; font-weight: 500; color: var(--portal-gray-600) !important; padding: 0.5rem 0.875rem !important; border: 1px solid transparent !important; border-radius: 0.5rem !important; background: transparent !important; }
#header .nav ul.level_2 li a:hover         { color: var(--portal-gray-800) !important; background: var(--portal-white) !important; border-color: var(--portal-gray-200) !important; }
#header .nav ul.level_2 li.active > a,
#header .nav ul.level_2 li a.active        { color: var(--portal-primary) !important; border-color: var(--portal-primary-light) !important; font-weight: 600; }

}

/* ==== MOBILE (≤ 767px) ==== */
@media (max-width: 767px) {

/* --- Sektion-Abstände: 5.5rem → 3.5rem --- */
:root                           { --portal-section-py: 3.5rem; }

/* --- Berater-Profil: .inside wird Grid, .profile.detail löst sich auf (display:contents) ---
   Dadurch können alle Sektionen per order neu angeordnet werden.
   .right (Preisblock) bekommt order:99 → landet ganz unten vor dem Footer. */
#main .inside:has(.ajax + .profile.detail) { display: grid; grid-template-columns: 100px 1fr; column-gap: 1rem; padding: 1.5rem 1rem 0; box-sizing: border-box; }
.ajax + .profile.detail         { display: contents; }
.ajax + .profile.detail > img   { grid-column: 1; grid-row: 1; width: 100px; height: 100px; align-self: start; }
.ajax + .profile.detail > h1    { grid-column: 2; grid-row: 1; align-self: start; font-size: 1.5rem; margin-bottom: 0; }
.ajax + .profile.detail > .teaser                   { grid-area: auto; grid-column: 2; grid-row: 1; align-self: start; margin-top: 2rem; padding-bottom: 0; margin-bottom: 1.5rem; }
.ajax + .profile.detail > .right                    { grid-area: auto; grid-column: 1 / -1; order: 99; position: static; margin-top: 1rem; }
.ajax + .profile.detail ~ .block,
.ajax + .profile.detail ~ .cats-block,
.ajax + .profile.detail ~ .portal-profile-sections,
.ajax + .profile.detail ~ .available-block,
.ajax + .profile.detail ~ .bundles-block,
.ajax + .profile.detail ~ .ratings,
.ajax + .profile.detail ~ .cte_tariffs             { grid-column: 1 / -1; }

/* --- Header Brand kompakter --- */
#header .brand-name             { font-size: 1.25rem; }

/* --- KRITISCH: Kontaktformular-Textarea Fix (war width: 275% !important) --- */
.cte_form textarea              { width: 100% !important; }

/* --- Formular-Padding reduzieren --- */
.cte_form form                  { padding: 1.5rem 1.25rem; margin-top: 1.5rem; }
.mod_login                      { padding: var(--portal-section-py) 1rem; }
.mod_login form                 { padding: 1.5rem 1.25rem; max-width: 100%; }
.mod_register                   { padding: var(--portal-section-py) 1rem; }
.mod_register form              { padding: 1.5rem 1.25rem; }

/* --- Intro-Buttons: untereinander statt nebeneinander --- */
.cte_text.block.fullwidth.portal-gray-700 p:has(a.button) { flex-direction: column !important; align-items: center; }
.cte_text.block.fullwidth.portal-gray-700 p:has(a.button) a.button { width: auto; min-width: 220px; text-align: center; justify-content: center; }

/* --- Spendenhinweis-Banner: weniger Padding --- */
.cte_text.block.portal-gray-700:not(.fullwidth) { padding: 1.5rem 1.25rem; margin-left: 1rem; margin-right: 1rem; }

/* --- Member-Area: Tabellen horizontal scrollbar --- */
#main .table                    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#main .table table              { min-width: 460px; }
.cte_tariffs                    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cte_tariffs table              { min-width: 380px; }

/* --- Meine Kunden: Inhalte untereinander + gleich groß --- */
.mod_customers .right             { float: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.mod_customers .right .button     { width: 100% !important; text-align: center; display: flex !important; justify-content: center; align-items: center; box-sizing: border-box; }
.mod_customers form.left          { float: none; width: 100%; }
.mod_customers .search            { display: flex !important; flex-direction: column !important; gap: 0.25rem; width: 100% !important; overflow: visible !important; height: auto !important; }
.mod_customers .search .text      { width: 100% !important; position: static !important; box-sizing: border-box; flex: none; }
.mod_customers .search .submit    { position: static !important; width: 100% !important; box-sizing: border-box; flex: none; }
/* Tabnav: 2 Spalten (Alle/Gold | Silver/Bronze) */
.mod_customers ul.tabnav          { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 0.75rem 0 0; margin-bottom: 0.75rem; height: auto !important; }
.mod_customers ul.tabnav li       { display: block; }
.mod_customers ul.tabnav li a     { display: block; text-align: center; width: 100%; box-sizing: border-box; }

/* --- Nachrichten: Toolbar, Tabs und Tabelle sinnvoll stapeln --- */
.mod_pm h1.bh                     { margin-bottom: 1rem; }
.mod_pm .clear                    { clear: both !important; display: block !important; height: 0; overflow: hidden; }
.mod_pm input.text.search         { float: none !important; display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box; margin: 0 0 0.5rem !important; }
.mod_pm a.button.create,
.mod_pm a.button.write_msg        { float: none !important; display: flex !important; width: 100% !important; min-height: 42px; box-sizing: border-box; text-align: center; margin: 0 !important; justify-content: center; }
.mod_pm ul.tabnav                 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 1rem 0 0; margin: 0 0 0.75rem; border-bottom: none; height: auto !important; }
.mod_pm ul.tabnav li              { display: block; min-width: 0; }
.mod_pm ul.tabnav li a            { display: flex; align-items: center; justify-content: center; min-height: 40px; width: 100%; box-sizing: border-box; text-align: center; border: 1.5px solid var(--portal-gray-200); border-radius: 0.5rem; padding: 0.5rem 0.625rem; }
.mod_pm ul.tabnav li.active a     { margin-bottom: 0; border-color: var(--portal-primary-light); background: var(--portal-primary-pale); color: var(--portal-primary); }
.mod_pm #result, .mod_pm .table   { clear: both; margin-top: 0.75rem; }
.mod_pm .table                    { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -0.25rem; margin-right: -0.25rem; padding: 0 0.25rem 0.5rem; }
.mod_pm .table table              { min-width: 680px; }

/* --- Member-Area: Card-Padding reduzieren --- */
.mod_statistic, .mod_status, .mod_phone_create, .mod_campaign, .mod_pm,
.mod_logout, .mod_customers, .mod_avatar, .mod_callback, .mod_categories,
.mod_consultations, .mod_onlinetime, .mod_invoice, .mod_favorites,
.mod_recharge, .cte_account    { padding: 1.25rem; }

/* --- Telefonnummer erstellen: Vorwahl + Nummer sauber stapeln --- */
.mod_phone_create form .row     { flex-direction: column; align-items: stretch; gap: 0.375rem; }
.mod_phone_create form .row label { width: auto; margin-bottom: 0; }
.mod_phone_create form .phone   { display: grid; grid-template-columns: 1fr; gap: 0.5rem; width: 100%; }
.mod_phone_create form .phone select.select,
.mod_phone_create form .phone input.text { width: 100% !important; min-width: 0; box-sizing: border-box; }
.mod_phone_create form input.submit { width: 100%; box-sizing: border-box; }

/* --- Guthaben aufladen: Payment-Aktion kompakt halten --- */
.mod_recharge .formbox.payment  { max-width: none; width: 100%; margin-bottom: 0.75rem; }
.mod_recharge .formbox.payment > a { grid-template-columns: 52px minmax(0, 1fr); min-height: 54px; padding: 0.625rem 0.75rem; gap: 0.625rem; }
.mod_recharge .formbox.payment > a img,
.mod_recharge .formbox.payment > a svg { width: 52px; max-width: 52px; height: 32px; }
.mod_recharge .formbox form     { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.mod_recharge .formbox form select.select,
.mod_recharge .formbox button.submit { width: 100%; box-sizing: border-box; }

/* --- Berater-Profil: Minutenpakete umbrechen --- */
.portal-bundle-row              { flex-wrap: wrap; gap: 0.375rem 1rem; }
.portal-bundle-action           { margin-left: 0; width: 100%; }
.portal-bundle-action a,
.portal-bundle-action button    { width: 100%; text-align: center; justify-content: center; display: flex; }

/* --- Tarif-Formularzeile: untereinander statt nebeneinander --- */
.block form .row.form_tariff    { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.block form .row.form_tariff label { min-width: 0; }
.block form .row.form_tariff input.text { max-width: 100%; width: 100%; }

/* --- Accordion kompakter --- */
.portal-accordion summary,
.portal-accordion .accordion-button { padding: 1.125rem 1.25rem; font-size: 1.125rem; }
.portal-accordion .accordion-body  { padding: 0 1.25rem 1.125rem; }

/* --- Blockquote kompakter --- */
.portal-blockquote              { padding: 1.5rem 1.25rem 1.25rem 1.75rem; }

}

/* ==== SMALL MOBILE (≤ 575px) ==== */
@media (max-width: 575px) {

/* --- Sektion-Abstände: 3.5rem → 2.75rem --- */
:root                           { --portal-section-py: 2.75rem; }

/* --- Header: brand-sub kleiner darstellen, brand-name kleiner --- */
#header .brand-sub              { font-size: 0.65rem; }
#header .brand-name             { font-size: 1.0625rem; }

/* --- KRITISCH: #window Modal → volle Breite + 1-spaltiges Grid --- */
/* CMS nutzt top:50%;left:50%;transform:translate(-50%,-50%) — alles muss überschrieben werden */
#window                         { width: 100% !important; left: 0 !important; top: 78px !important; transform: none !important; max-height: calc(100vh - 78px); overflow-y: auto; border-radius: 0 !important; }
#window .inside                 { padding: 2rem 1.25rem 1.5rem !important; max-height: none !important; overflow-y: visible !important; }
#window form                    { grid-template-columns: 1fr; }
#window form .row.check,
#window form input.submit       { grid-column: 1; }

/* --- Tabnav Pills kompakter --- */
ul.tabnav                       { padding: 0.75rem 1rem 1rem; gap: 0.25rem; }
.tabnav li a                    { padding: 0.375rem 0.875rem; font-size: 0.75rem; }
ul.tabnav:has(~ .agentlist)     { margin-bottom: 4.25rem; }

/* --- Berater-Listing: 1 Spalte auf kleinen Phones --- */
.tabnav ~ .agentlist            { grid-template-columns: 1fr; gap: 1rem; }

/* --- Content-Padding: 1rem seitlich statt 1.5rem --- */
.cte_text.block.fullwidth.portal-gray-700 { padding: var(--portal-section-py) 1rem; }
.cte_text.block.widthlogo       { padding: var(--portal-section-py) 1rem; }
#main .cte_text.block:not(.fullwidth):not(.widthlogo):not(.portal-gray-700) { padding: var(--portal-section-py) 1rem; }
#main .inside > .portal-intro   { padding: var(--portal-section-py) 1rem 2rem; }
.cte_form.block                 { padding: var(--portal-section-py) 1rem; }
.cte_form form                  { padding: 1.25rem 1rem; margin-top: 1.25rem; }
.mod_login form, .mod_register form { padding: 1.25rem 1rem; }

/* --- Tier-Fotos Mobile: 2×2 via CSS Grid ---
   Struktur im CMS: <p>Mein Tier:<br><img><img><img><img><br><br><br></p>
   nth-of-type(odd) → Spalte 1, nth-of-type(even) → Spalte 2
   → Bilder landen immer korrekt 2 pro Zeile, unabhängig von Text/<br> */
.ajax + .profile.detail ~ .block .longtext p img { height: 140px !important; margin: 0 !important; }
.ajax + .profile.detail ~ .block .longtext p:has(img) { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ajax + .profile.detail ~ .block .longtext p:has(img) img { width: 100% !important; height: 140px !important; }
.ajax + .profile.detail ~ .block .longtext p:has(img) img:nth-of-type(odd)  { grid-column: 1; }
.ajax + .profile.detail ~ .block .longtext p:has(img) img:nth-of-type(even) { grid-column: 2; }
.ajax + .profile.detail ~ .block .longtext p:has(img) br { height: 0; line-height: 0; font-size: 0; margin: 0; padding: 0; }

/* --- Berater-Profil Sidebar: Preis und Padding kompakter --- */
.ajax + .profile.detail .right          { padding: 1.25rem; }
.ajax + .profile.detail .right .tariff  { font-size: 1.375rem; }
#main .inside:has(.ajax + .profile.detail) { padding: 1rem 1rem 0; }

/* --- Registrierung: Telefon-Feld untereinander --- */
.mod_register .phone            { flex-direction: column; }
.mod_register .phone select.select { width: 100%; }

/* --- Berater-Profil-Sections --- */
.portal-profile-sections        { padding: 2rem 1rem var(--portal-section-py); }

/* --- Tariff-Fußnote --- */
.cte_tariffs                    { padding: 0 1rem 1.5rem; }

/* --- Member-Area: .inside Padding --- */
body:has(#header .nav ul.level_2) #main .inside:has(.mod_statistic,.mod_status,.mod_pm,.mod_customers,.mod_logout,.mod_avatar,.mod_phone_create,.mod_campaign,.mod_callback,.mod_categories,.mod_consultations,.mod_onlinetime,.mod_invoice,.mod_favorites,.mod_recharge) { padding: 1rem 1rem 2.5rem; }

}

/* ==== KLEINSTGERÄTE (≤ 400px) ==== */
@media (max-width: 400px) {

/* --- Berater-Mini: 2 Spalten statt 3 --- */
.portal-berater-home__grid      { grid-template-columns: repeat(2, 1fr); }
#main .inside:not(:has(.tabnav)) .agentlist { grid-template-columns: repeat(2, 1fr); }
.ce_text.block:has(p > img + img) p { grid-template-columns: repeat(2, 1fr); }
.berater-leiste__grid           { grid-template-columns: repeat(2, 1fr); }

}