/* Responsive layer: original colors, source selectors and comments stay in style.css. */
body { font:13px/1.5 Arial,Helvetica,sans-serif; }
h1,h2,h3,h4 { line-height:1.3; }
h4 { font-size:18px; }
p { line-height:1.5; }
a { text-decoration:none; }
#wrapper { width:100%; max-width:1600px; padding:0; }
#header { width:100%; height:auto; min-height:118px; margin-top:5px; padding:24px 25px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:4px 14px; }
#logo { float:none; width:auto; height:auto; min-width:0; }
.sl-logo { display:block; padding:0; width:450px; max-width:100%; height:auto; }
.logoright { float:none; }
.logocontent { display:flex; align-items:center; gap:10px; width:auto; height:auto; padding:6px 10px; margin:-24px -20px 0 0; font-size:0; }
.logocontent a { display:inline-flex; align-items:center; justify-content:center; min-height:26px; min-width:26px; }
#header > .divend { display:none; }
.hotline { grid-column:1 / -1; margin:0 -20px 0 0; padding:0; text-align:right; }
#menu { width:100%; height:auto; min-height:50px; padding:0 10px; background:#313943 url('../images/img01.jpg') repeat-x left -127px; }
#menu ul { margin:0; padding:0; flex-wrap:wrap; width:100%; }
#menu li { float:none; height:auto; }
#menu a,#menu button.nav-link { margin:10px 3px; padding:7px 12px; font:13px/1.3 Arial; color:#fff; border:0; background:none; text-align:left; }
#menu .active { background-color:#526170; border-radius:3px; }
#menu .navbar-toggler { min-height:40px; margin:5px 0 5px auto; border:1px solid #8d99a6; }
#page,#page-bgtop,#page-bgbtm { width:100%; }
#page { background:#fff; box-shadow:0 2px 4px #0003; }
#page-bgtop { background:linear-gradient(to bottom,#bdbec2 0,#3266cc 8px,#3266cc 38px,#fff 39px); }
#page-bgbtm { background:none; }
#page-bgtop > div:first-child { min-height:39px; box-sizing:border-box; padding:10px 8px!important; line-height:19px; }
#content { width:100%; padding:18px 20px 10px; }
.post .entry { padding:0 12px; text-align:left; overflow-wrap:anywhere; }
.entry img { max-width:100%; height:auto; }
.entry input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.entry select,.entry textarea { max-width:100%; box-sizing:border-box; }
.form-control,.form-select { font:inherit; min-height:30px; padding:4px 6px; border:1px solid #a3a7ad; border-radius:3px; color:#313943; background-color:#e3e7ed; }
.form-control[readonly] { background:#f1f3f6; }
.entry .btn { font-size:13px; min-height:30px; }
.btn-primary { --bs-btn-bg:#003399; --bs-btn-border-color:#003399; --bs-btn-hover-bg:#002877; --bs-btn-hover-border-color:#002877; }
.cust,.zd { width:100%; padding-left:0; display:flow-root; }
.custl,.custr { width:49%; min-width:0; }
.custm { width:2%; }
.custll,.custlli,.custllis { width:32%; min-width:0; }
.custrr,.custrri,.custrrii { width:68%; min-width:0; }
.custrrr { width:68%; }
.custinput,.zdinput,.zdrri { width:400px; max-width:100%; }
.zdlll,.zdrrr { width:50%; }
.loginall { width:450px; max-width:100%; }
.loginli { width:34%; }
.loginre,.loginree { width:66%; }
.logininput,.passwortfeld { width:100%; max-width:100%; }
#passwort-anzeigen { width:30px; min-height:30px; }
.hometxt { padding-left:0; }
.aleft,.aright { width:49%; max-width:100%; }
.amiddle { width:2%; }
.acustl { width:25%; }
.acustr { width:75%; }
.ccp-table-wrap { width:100%; margin-bottom:16px; }
.ccp-table { width:100%; table-layout:fixed; border-collapse:collapse; color:inherit; font-size:13px; }
.ccp-table th { font-weight:bold; }
.ccp-table th,.ccp-table td { border-bottom:1px dotted #929292; padding:6px 8px; vertical-align:top; overflow-wrap:anywhere; }
.ccp-table td > a:has(img),.ccp-table button:has(img) { display:inline-flex; min-width:30px; min-height:30px; align-items:center; justify-content:center; }
.ccp-inline-action { display:inline-block; margin:0; }
.ccp-icon-button { background:none; border:0; padding:0; color:inherit; }
.ccp-form-actions { padding-left:0!important; padding-right:0!important; max-width:100%; }
#footer { width:100%; max-width:1600px; padding:15px 25px; }
#footercontent { margin:0; }
.footer-column { min-width:0; }
.footer-column .footerdiv,.footer-column .footerdivueb { float:none; width:auto; text-align:left; }
.footer-column .footerdivueb { margin-bottom:6px; }
.footer-column .footerdiv { min-height:15px; }
@media(max-width:1199.98px) {
 #menu li { background:none; }
 #ccpNavigation { background:#313943; margin:0 -10px; padding:0 10px; }
 #menu a,#menu button.nav-link { margin:2px 0; padding:12px; min-height:44px; width:100%; }
 #menu li > .ccp-inline-action { width:100%; }
}
@media(max-width:991.98px) {
 .custl,.custr,.aleft,.aright { float:none; width:100%; margin-bottom:16px; }
 .custm,.amiddle { display:none; }
}
@media(max-width:767.98px) {
 body { padding-bottom:16px; }
 #wrapper { margin-top:0; }
 #header { margin-top:0; min-height:0; padding:14px 14px 10px; gap:4px 10px; }
 .logocontent { margin:-14px -9px 0 0; padding:4px 6px; gap:6px; box-shadow:none; }
 .logocontent a { min-width:28px; min-height:32px; }
 .hotline { font-size:14px; margin:6px -9px 0 0; }
 #content { padding:14px 2px 8px; }
 .post .entry { padding:0 12px; }
 .form-control,.form-select { min-height:42px; font-size:16px; }
 .entry input[type=submit],.entry input[type=button],.entry .btn { min-height:42px; white-space:normal; }
 .loginli,.loginre,.loginree { float:none; width:100%; text-align:left; }
 .loginli { margin-bottom:5px; }
 .custll,.custlli,.custllis,.custrr,.custrri,.custrrii,.custrrr { float:none; width:100%; }
 .custrr,.custrri { margin-bottom:9px; }
 .custrrii { margin-top:6px; text-align:left; }
 .zdll,.zdmm,.zdrr,.zdl,.zdm,.zdr { float:none; width:100%; }
 .zdrrr { text-align:right; }
 .ccp-table,.ccp-table tbody { display:block; }
 .ccp-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .ccp-table tbody tr { display:block; margin:0 0 12px; padding:8px 10px; border:1px solid #ccd2db; border-radius:4px; background:#fff; }
 .ccp-table td,.ccp-table tbody th { display:block; width:100%; padding:7px 0; border:0; text-align:left; }
 .ccp-table td + td,.ccp-table td + th { border-top:1px dotted #d0d5dc; }
 .ccp-table [data-label]:before { content:attr(data-label); display:block; font-weight:bold; margin-bottom:3px; }
 .ccp-form-actions { float:none!important; display:inline-block; margin:8px 8px 0 0; }
 #footer { padding:15px 14px; }
 .footer-column .footerdiv { font-size:12px; }
 .footer-column a { display:inline-block; padding:4px 0; }
}
.ccp-list-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:12px; }

.ccp-stat-summary { clear:both; padding-top:10px; }
@media(max-width:767.98px) { .ccp-table td:empty { display:none; } }

/* The longer administrator menu collapses before it can wrap into unreadable rows. */
@media(max-width:1399.98px) {
 #menu.navbar-expand-xxl li { background:none; }
 #menu.navbar-expand-xxl #ccpNavigation { background:#313943; margin:0 -10px; padding:0 10px; }
 #menu.navbar-expand-xxl a,#menu.navbar-expand-xxl button.nav-link { margin:2px 0; padding:12px; min-height:44px; width:100%; }
 #menu.navbar-expand-xxl li > .ccp-inline-action { width:100%; }
}

/* Equal outer spacing around the footer content. */
@media(min-width:768px) {
 #footercontent > .row { justify-content:space-between; margin-left:0; margin-right:0; }
 #footercontent .footer-column { flex:0 1 auto; width:max-content; max-width:25%; padding-left:0; padding-right:0; }
}

/* Align invoice text and PDF icon on the same row. */
@media(min-width:768px) {
 .ccp-invoice-table th,.ccp-invoice-table td { vertical-align:middle; }
 .ccp-invoice-table a.invoice-show { min-height:0; min-width:0; line-height:1; vertical-align:middle; }
 .ccp-invoice-table a.invoice-show img { display:block; padding-top:0!important; vertical-align:middle!important; }
}

/* Compact desktop rows: center both text and action icons in every CCP table. */
@media(min-width:768px) {
 .ccp-table th,.ccp-table td { vertical-align:middle; }
 .ccp-table td > a:has(img),.ccp-table td button:has(img) { min-width:0; min-height:0; line-height:1; vertical-align:middle; }
 .ccp-table td > a > img,.ccp-table td button > img { display:block; padding-top:0!important; vertical-align:middle!important; }
}

/* Separate customer edit fields while keeping comfortable mobile input sizes. */
.custrri { margin-bottom:7px; }
@media(min-width:768px) {
 .custrri .custinput { min-height:28px; padding:3px 6px; }
 .custlli { padding-top:3px; }
}

/* Keep the local Bootstrap dropdown arrow and separate adjacent form actions. */
.entry select.form-select { padding-right:2.25rem; cursor:pointer; }
.ccp-form-actions + .ccp-form-actions { margin-left:8px; }

/* Consistent text action buttons throughout the customer portal. */
.entry a.ccp-action-button { display:inline-block; padding:6px 12px; margin:4px 8px 4px 0; border:1px solid var(--bs-btn-border-color); border-radius:4px; color:var(--bs-btn-color); text-decoration:none; line-height:1.5; white-space:normal; }
.entry a.ccp-action-button:hover { color:var(--bs-btn-hover-color); background-color:var(--bs-btn-hover-bg); border-color:var(--bs-btn-hover-border-color); }

/* Button labels stay on one line; narrow MAC action rows stack instead. */
.entry .btn,.entry a.ccp-action-button { white-space:nowrap; overflow-wrap:normal; }
@media(max-width:767.98px) {
 .zdlll,.zdrrr { float:none; width:100%; }
 .zdrrr { text-align:left; }
}

/* The password action starts on its own line below the label. */
.custll.ccp-password-label,.custrrr.ccp-password-action { float:none; width:100%; }
.ccp-password-action { clear:both; margin-top:5px; }

/* Align contract cancellation actions to the right and back navigation to the left. */
.ccp-list-actions > br { display:none; }
.ccp-list-actions > a:first-of-type { margin-left:0; }
.ccp-table .ccp-contract-action-cell { text-align:right; padding-right:0; }

/* Equal desktop list rows, including rows without an action button. */
@media(min-width:768px) {
 .ccp-table tbody tr { height:32px; }
 .ccp-table:has(tbody .btn) tbody tr { height:40px; }
 .entry .ccp-table a.ccp-action-button,.entry .ccp-table .btn { min-height:26px; padding:2px 8px; margin-top:0; margin-bottom:0; line-height:20px; vertical-align:middle; }
}

/* The password button already describes the action; avoid a duplicate heading. */
.custll.ccp-password-label { display:none; }

/* Align the two customer overview actions horizontally on desktop. */
.ccp-customer-action-row { clear:both; display:grid; grid-template-columns:49% 49%; gap:2%; align-items:start; }
.ccp-customer-action-row > div { float:none; width:100%; margin-top:0; }
@media(max-width:991.98px) { .ccp-customer-action-row { grid-template-columns:1fr; gap:8px; } }

/* Match the bank action column beneath the account details. */
@media(min-width:992px) {
 .ccp-customer-action-row > .ccp-password-action { width:68%; margin-left:32%; }
}

/* Align the customer number with values inside the left details column. */
@media(min-width:992px) {
 .cust:has(> .custl) > .custll:first-child { width:15.68%; }
 .cust:has(> .custl) > .custll:first-child + .custrr { width:84.32%; }
}

/* Forwarding save ends at the same right edge as its selection field. */
.ccp-forwarding-actions { display:flex; justify-content:space-between; gap:8px; width:425px; max-width:100%; clear:both; }
.ccp-forwarding-actions > .ccp-form-actions { float:none!important; margin:0; }

/* Compact spacing between forwarding fields and the action row. */
#rufumleitung > .ccp-forwarding-gap { height:12px; clear:both; }

/* Identify the customer center action alongside the account section labels. */
.ccp-customer-center-label { display:block; margin-bottom:5px; }
@media(min-width:992px) {
 .ccp-customer-action-row > .ccp-password-action { position:relative; }
 .ccp-customer-center-label { position:absolute; top:4px; right:100%; width:47.058824%; padding-top:6px; margin:0; }
}

.ccp-customer-center-label { font-weight:bold; }

/* Separate login input rows as in the customer edit forms. */
.loginre { margin-bottom:8px; }

/* Center login and password reset labels beside their input fields. */
@media(min-width:768px) {
 .loginli:has(+ .loginre) { min-height:33px; display:flex; align-items:center; }
}

/* Distinguish mobile footer headings clearly from the navigation links. */
@media(max-width:767.98px) {
 .footer-column .footerdivueb { font-size:15px; font-weight:700; line-height:1.4; padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.25); }
 .footer-column .footerdiv,.footer-column .footerdiv a { font-weight:400; }
}

/* Login actions share one row and remain vertically centered on mobile. */
.ccp-login-actions { display:flex; justify-content:space-between; align-items:center; gap:8px; clear:both; }
.ccp-login-actions > .loginli,.ccp-login-actions > .loginree { float:none; width:auto; margin:0; }
.ccp-login-actions a.ccp-action-button { margin:0; }

/* Center link-button captions within their full height, including mobile minimum height. */
.entry a.ccp-action-button { display:inline-flex; align-items:center; justify-content:center; }

/* Paired form buttons sit together whenever their natural widths fit. */
.ccp-paired-actions { display:contents; }
.ccp-forwarding-actions,.ccp-login-actions { flex-wrap:wrap; }
@media(max-width:767.98px) {
 .ccp-paired-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; clear:both; width:100%; }
 .ccp-paired-actions > div { float:none!important; width:auto; max-width:100%; margin:0; text-align:left; }
 .ccp-paired-actions a.ccp-action-button { margin:0; }
}

/* Keep cancellation left and saving right within each mobile form action row. */
@media(max-width:767.98px) {
 .ccp-paired-actions { justify-content:space-between; }
 .ccp-paired-actions > div:last-child { margin-left:auto; }
}

/* Match paired customer and MAC actions to the 400px input width. */
@media(max-width:767.98px) {
 .ccp-paired-actions:has(> .custllis),.ccp-paired-actions:has(> .zdlll) { width:400px; max-width:100%; }
}

/* Keep the full-width menu background aligned with its actual responsive height. */
body { background-image:none; }
#menu { position:relative; isolation:isolate; }
#menu::before { content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw; background:inherit; z-index:-1; pointer-events:none; }
#page-bgtop { margin-top:0; }