/* Allgemeines */
:root { --gelb:#F8CA30; --rot:#941D1F; --rot-dunkel:#6E1517; --navy:#0B3858; --text:#1b1f24; --grau:#5a6470; --linie:#e3e6ea; --schatten:0 8px 28px rgba(16,24,40,.08); }
html { color-scheme: only light; background-color:#FFF; }
body { font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--text); font-size:17px; line-height:1.55; text-align:center; margin:0; padding:0; -webkit-font-smoothing:antialiased; }
a:link { color:#000; text-decoration:none; }
a:visited { color:#000; text-decoration:none; }
a:hover { color:#525252; text-decoration:none; }
a:active { text-decoration:none; }
.roteSchrift { color:#941D1F; }
.row:after { content:""; display:table; clear:both; }
.text_master { width:90%; max-width: 1200px; margin:auto; }
.headline { font-size:clamp(24px, 3.2vw, 32px); line-height:1.2; letter-spacing:-0.01em; }
.subheadline { font-size:20px; }
.desktop { display: block; }
.mobile { display: none; }
/**************/

/* Login */
#login_header { position:relative; z-index:2; padding-top:14px; padding-bottom:14px; background-color:var(--gelb); box-shadow:0 2px 14px rgba(0,0,0,.10); text-align:left; }
#login_image_container { position:relative; padding-top:clamp(70px, 9vw, 130px); padding-bottom:84px; background-color:#525252; color:#FFF; text-align:left; background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.68) 100%), url('../design/Background.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center 70%; text-shadow:0 1px 14px rgba(0,0,0,.45); }
#login_image_container .headline { font-size:clamp(28px, 4.6vw, 46px); }
#login_image_container .text_master { font-size:clamp(16px, 1.8vw, 20px); }
#login_content { position:relative; z-index:1; width:500px; max-width:calc(100% - 32px); box-sizing:border-box; min-height:200px; margin:-56px auto 48px; background:#FFF; border-radius:16px; box-shadow:0 14px 44px rgba(16,24,40,.16); text-align:left; padding:36px 36px 24px; }
#login_footer_container1 { position:relative; padding-top:56px; padding-bottom:56px; min-height:200px; background-color:var(--gelb); font-size:16px; }
#login_footer_container1 .text_master { display:flex; flex-wrap:wrap; gap:24px; }
#login_footer_container1 .row { display:none; }
#login_footer_container1 .product_container { float:none; flex:1 1 280px; width:auto; margin:0; padding:0 22px 22px; box-sizing:border-box; background:#FFF; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(16,24,40,.14); }
#login_footer_container1 .product_container img { display:block; width:calc(100% + 44px); max-width:none; height:200px; object-fit:cover; margin:0 -22px 18px; }
.product_container { float:left; width:30%; margin:1.5%; text-align: left; }
.vier_spalten { float:left; box-sizing:border-box; width:22%; margin:1.5%; padding:24px 10px; text-align:center; background:#f5f6f8; border-radius:16px; }
#login_footer_container2 { position:relative; min-height:400px; padding-top:56px; padding-bottom:40px; background-color:#FFF; }
#login_footer_container2 hr { border:0; border-top:1px solid var(--linie); margin:24px 0; }
#login_footer_container3 { position:relative; padding:48px 30px; background-color:#f1f2f4; text-align:left; }
#login_footer { position:relative; padding-top:44px; padding-bottom:44px; background-color:var(--rot); color:#FFF; text-align:left; font-size:16px; line-height:1.7; }
#login_footer a:link { color:#FFF; text-decoration:none; display:inline-block; padding:12px 0; }
#login_footer a:visited { color:#FFF; text-decoration:none; }
#login_footer a:hover { text-decoration:underline; }

.login_field { width:100%; box-sizing:border-box; height:50px; border:1.5px solid #c4cad3; border-radius:10px; background:#FFF; color:var(--text); padding:0 16px; margin:6px 0; font-size:17px; transition:border-color .15s, box-shadow .15s; }
.login_field:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(11,56,88,.16); }
.login_field::placeholder { color:#6B6B6B; opacity:1; }
/* Lange Platzhalter (z. B. "SMS-Passwort / Anruf-Passwort") nicht abschneiden; Eingabeschrift bleibt 17px (iOS zoomt unter 16px) */
@media only screen and (max-width:420px) { .login_field { padding:0 12px; } .login_field::placeholder { font-size:13px; } }
@media only screen and (max-width:480px) { #login_content { padding-left:22px; padding-right:22px; } }
.login_field:-ms-input-placeholder { color:#000; }
.login_field::-ms-input-placeholder { color:#000; }
.login_submit { -webkit-appearance:none; appearance:none; width:100%; height:50px; border:0; border-radius:10px; background-color:var(--rot); color:#FFF; margin:6px 0; font-size:17px; font-weight:600; letter-spacing:.01em; cursor:pointer; box-shadow:0 2px 8px rgba(148,29,31,.28); transition:background-color .15s, transform .05s; }
@media (hover:hover) { .login_submit:hover { background-color:var(--rot-dunkel); } }
.login_submit:focus { outline: none; }
.login_submit:focus-visible, .login_field:focus-visible { outline:3px solid #0B3858; outline-offset:2px; }
.login_submit:active { background-color:var(--rot-dunkel); transform:translateY(1px); }
/* Fehlermeldungen als ruhige Hinweisbox statt roter Fliesstext */
#err-serial, #err-sms, #err-return, #err-many { background:#fdeeee; border-left:4px solid var(--rot); border-radius:8px; padding:12px 14px; margin:0 0 14px; font-size:15px; line-height:1.45; }
#err-serial br, #err-sms br, #err-return br, #err-many br { display:none; }
#block-return { border-top:1px solid var(--linie); margin-top:20px; }

@media only screen and (max-width:576px) { 
    .product_container { width:95%; margin-bottom: 20px; }
    .desktop { display: none; }
    .mobile { display: block; }
}

@media only screen and (max-width:768px) {
    .vier_spalten { width:46%; margin:2%; font-size:14px; }
}

@media only screen and (max-width:992px) { 

}

@media only screen and (max-width:1200px) { 

}

/*********/

/* Dashboard */
#dashboard_background { position: relative; width:100%; background-color: #FFF; }
#dashboard { position:relative; width:100%; max-width:1280px; margin:auto; color:var(--text); padding-top:32px; padding-bottom:48px; }
.lastgang_container { position:relative; width:90%; background-color:#FFF; margin:20px auto 0; min-height:400px; padding:14px 14px 12px; border:1px solid var(--linie); border-radius:16px; box-shadow:var(--schatten); }
.chart-container { position: relative; margin: auto; width: 95%; height: 350px; }
/* Feste Hoehe der Huelle: Chart.js richtet sich nach dem Eltern-Element, ohne sie waechst das Diagramm endlos */
.chart_wrap { position: relative; width: 95%; height: 350px; margin: auto; }
#lastgang1 { }
.chart_legend { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; padding:12px 8px 4px; }
.chart_legend_btn { -webkit-appearance:none; appearance:none; min-height:44px; padding:6px 10px; border:2px solid var(--c, #333); border-radius:22px; background:#FFF; color:#000; font:inherit; font-size:13px; line-height:1.2; text-align:left; cursor:pointer; display:flex; align-items:center; gap:8px; }
.chart_legend_btn::before { content:""; width:12px; height:12px; border-radius:50%; border:2px solid var(--c, #333); background:transparent; flex:none; }
.chart_legend_btn[aria-pressed="true"] { background:var(--c, #333); color:#FFF; font-weight:bold; }
.chart_legend_btn[aria-pressed="true"]::before { background:#FFF; }
@media only screen and (min-width:577px) { .chart_legend { grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); } .chart_legend_btn { white-space:nowrap; } }
.chart_legend_btn:focus-visible { outline:3px solid #0B3858; outline-offset:2px; }
#lastgang2 { display: none; }
#lastgang3 { display: none; }
#lastgang4 { display: none; }
.lastgang_image { width:95%; min-width:600px; margin:auto; }
.headlines { position: relative; width:90%; text-align: left; margin:auto; margin-top: 20px; }
#lastgang_auswahl_headline { position: relative; padding-left: 1%; }
#lastgang_auswahl { position: relative; width:88%; padding:1%; border:1px solid #941D1F; margin:auto; margin-top:20px; margin-bottom: 20px; text-align: left; }
.lastgang_auswahl_button { position:relative; float:left; width:20%; text-align: center; padding-top:30px; padding-bottom: 30px; color: #FFF; background-color: #941D1F; margin:1%; cursor: pointer; border:1px solid #941D1F; }
@media (hover:hover) { .lastgang_auswahl_button:hover { background-color: transparent; color:#000; } }
#dashboard_menu { float:left; width:22%; min-height: 500px; }
.dashboard_menu_row { position:relative; height:40px; padding-top:15px; width:100%; margin-top:10px; margin-bottom:10px; border:0; border-radius:12px; background:#FFF; box-shadow:0 1px 3px rgba(16,24,40,.12), 0 0 0 1px rgba(16,24,40,.06); font-weight:600; transition:background-color .15s; }
.dashboard_menu_row:hover { background-color:#fdf3cf; }
.dashboard_menu_active { background-color:var(--gelb); }
.dashboard_menu_icon { position:absolute; width:51px; height:51px; left:2px; top:2px; }
#dashboard_content { float:left; width:78%; min-height: 500px; }
#dashboard_content_headline { position:relative; width:90%; height:40px; padding-top:15px; border-radius:12px; background-color:var(--gelb); margin:auto; font-weight:600; }
#leistungswerte { position:relative; width:88%; border:1px solid var(--linie); border-radius:16px; box-shadow:var(--schatten); background:#FFF; margin:auto; margin-bottom:20px; padding:1%; text-align:left; }
.leistungswert_container { float:left; width:14%; margin:1%; background:linear-gradient(160deg, #124a73 0%, #0B3858 100%); border-radius:12px; box-shadow:0 4px 12px rgba(11,56,88,.25); padding-top:20px; padding-bottom:20px; color:#FFF; text-align:center; line-height:1.4; }
.leistungswert_image { width:100%; }
#leistungswerte_headline { position: relative; padding-left: 1%; }

@media only screen and (max-width:576px) { 
    
}

@media only screen and (max-width:768px) { 
    
}

@media only screen and (max-width:1024px) { 

}

@media only screen and (max-width:1200px) { 
    #dashboard_menu { display: none; }
    #dashboard_content { width:100%; }
    .leistungswert_container { width:31%; font-size:15px; }
    .lastgang_auswahl_button { width:30%; font-size:15px; }
    .lastgang_container { height:auto; }
}

@media only screen and (max-width:576px) {
    #dashboard { padding-top:20px; }
    #dashboard_content_headline { width:92%; }
    .headlines { width:92%; }
    .lastgang_container { width:94%; padding-left:0; padding-right:0; }
    .chart_wrap { width:100%; height:320px; }
    #leistungswerte { width:92%; padding:2%; }
    .leistungswert_container { width:46%; margin:2%; font-size:16px; box-sizing:border-box; }
    .leistungswert_container:nth-last-child(2) { width:96%; }
    #login_footer { padding-top:30px; padding-bottom:30px; }
}

/*************/