/* =====================================================================
STARQ — Kundenportal (Login + Dashboard) • Drop-in v3
Paste AFTER base CSS. No HTML changes required.
===================================================================== */
/* ---------- Font-Face: Plus Jakarta Sans ---------------------------- */
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800;
font-style: italic;
font-display: swap;
}
/* ---------- Scope & tokens ------------------------------------------ */
:is(#endkundenportal-ui, #endkunenportal-ui){
/* brand */
--bg-deep: #0b2d1f;
--ink: #EAF3EE;
--ink-strong: #FFFFFF;
--brand: #89EE48;
--brand-ink: #093d21;
/* login stage */
--login-photo: url("https://starqstrom.de/auftragsstrecke/strecke/assets/images/250905_TWOSEE_STARQ_Kundenportal_Hintergrund.jpg");
--photo-w: clamp(520px, 52vw, 880px);
--photo-pos-x: 36%; /* crop focus point of the image */
--login-col-w: 426px; /* tidy column width */
/* assets */
--corner-logo: url("https://starqstrom.de/auftragsstrecke/strecke/assets/images/twosee_corner_logo.png");
font-family: 'Plus Jakarta Sans', system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
/* ---------- Typography: Headings & Body Text (CI-Vorgaben) ----------- */
:is(#endkundenportal-ui, #endkunenportal-ui) h1,
:is(#endkundenportal-ui, #endkunenportal-ui) .h1 {
font-size: clamp(2.25rem, 1.919rem + 1.4vw, 3rem);
line-height: 1.3;
font-weight: 600;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
:is(#endkundenportal-ui, #endkunenportal-ui) h2,
:is(#endkundenportal-ui, #endkunenportal-ui) .h2 {
font-size: clamp(2rem, 1.779rem + 0.93vw, 2.5rem);
line-height: 1.3;
font-weight: 600;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
:is(#endkundenportal-ui, #endkunenportal-ui) h3,
:is(#endkundenportal-ui, #endkunenportal-ui) .h3 {
font-size: clamp(1.625rem, 1.432rem + 0.81vw, 2.063rem);
line-height: 1.3;
font-weight: 600;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
:is(#endkundenportal-ui, #endkunenportal-ui) h4,
:is(#endkundenportal-ui, #endkunenportal-ui) .h4 {
font-size: clamp(1.5rem, 1.39rem + 0.47vw, 1.75rem);
line-height: 1.3;
font-weight: 600;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
:is(#endkundenportal-ui, #endkunenportal-ui) h5,
:is(#endkundenportal-ui, #endkunenportal-ui) .h5 {
font-size: clamp(1.25rem, 1.167rem + 0.35vw, 1.438rem);
line-height: 1.3;
font-weight: 600;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
:is(#endkundenportal-ui, #endkunenportal-ui) h6,
:is(#endkundenportal-ui, #endkunenportal-ui) .h6 {
font-size: clamp(1.125rem, 1.097rem + 0.12vw, 1.188rem);
line-height: 1.3;
font-weight: 600;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Fließtext: Einheitliche Schriftgröße und Line-Height */
:is(#endkundenportal-ui, #endkunenportal-ui) p,
:is(#endkundenportal-ui, #endkunenportal-ui) body,
:is(#endkundenportal-ui, #endkunenportal-ui) .body-text {
font-size: 1rem;
line-height: 1.5;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* ---------- Stage / split layout (default = Login look) -------------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .content{
position: relative;
min-height: 100vh;
background: var(--bg-deep);
overflow: hidden;
}
/* Photo (left) */
:is(#endkundenportal-ui, #endkunenportal-ui) .content::before{
content:"";
position:absolute; inset:0 auto 0 0;
width: var(--photo-w);
background: var(--login-photo) var(--photo-pos-x) center/cover no-repeat;
opacity:.85;
}
/* Green glass curtain (right) */
:is(#endkundenportal-ui, #endkunenportal-ui) .content::after{
content:"";
position:absolute; inset:0 0 0 auto;
left: var(--photo-w);
background:
radial-gradient(1200px 800px at 40% 10%, rgba(255,255,255,.04), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.08) 22%, transparent 60%),
#093D00;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
/* ---------- LOGIN: left-locked column, centered vertically ------------ */
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container{
position: fixed;
left: var(--photo-w); right: 0; top: 0; bottom: 0;
display: grid;
grid-template-columns: minmax(0, var(--login-col-w)) 1fr; /* column near seam */
align-content: center; /* vertical center */
gap: 14px;
padding-left: clamp(20px, 3.2vw, 48px);
padding-right: clamp(24px, 4vw, 72px);
color: var(--ink);
z-index: 3;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container > *{ grid-column: 1; }
/* heading */
:is(#endkundenportal-ui, #endkunenportal-ui) .login h1{
margin: 0 0 16px;
font: 900 clamp(28px, 3.2vw, 44px)/1.08 'Plus Jakarta Sans', system-ui, sans-serif;
color:#fff;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* tidy widths */
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container > .row,
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container > .row > .col,
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-group,
:is(#endkundenportal-ui, #endkunenportal-ui) .login .passwort-vergessen,
:is(#endkundenportal-ui, #endkunenportal-ui) .login .btn.btn-primary.btn-block{
width: 100%;
max-width: var(--login-col-w);
}
/* inputs */
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-group{ margin-bottom:14px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-group > label{ position:absolute; left:-9999px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control{
height:56px; border-radius:32px; padding:0 22px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
color:#fff; font-size:15px; letter-spacing:.2px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control::placeholder{ color:rgba(255,255,255,.92); }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-group:has(.form-control:focus) .form-control{
border-color: var(--brand);
background: rgba(255,255,255,.12);
box-shadow: 0 0 0 3px rgba(137,238,72,.22), 0 10px 26px rgba(0,0,0,.30);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login input:-webkit-autofill{
-webkit-text-fill-color:#fff;
box-shadow: 0 0 0 1000px rgba(255,255,255,.10) inset;
transition: background-color 9999s ease-out 0s;
}
/* Force pure-white placeholders */
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control::placeholder{
color: #fff !important;
opacity: 1; /* Chrome/Safari sometimes dim placeholders */
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control::-webkit-input-placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control::-moz-placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control:-ms-input-placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-control::-ms-input-placeholder{ color:#fff !important; opacity:1; }
/* remember-me (if present) */
:is(#endkundenportal-ui, #endkunenportal-ui) .login input[type="checkbox"],
:is(#endkundenportal-ui, #endkunenportal-ui) .login input[type="radio"]{
appearance:none; -webkit-appearance:none;
width:18px; height:18px; margin-right:10px;
border-radius:999px; border:2px solid var(--brand); background:transparent;
display:inline-grid; place-content:center;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login input[type="checkbox"]::before,
:is(#endkundenportal-ui, #endkunenportal-ui) .login input[type="radio"]::before{
content:""; width:10px; height:10px; border-radius:inherit; background:var(--brand);
transform:scale(0); transition:transform .15s ease-in-out;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login input[type="checkbox"]:checked::before,
:is(#endkundenportal-ui, #endkunenportal-ui) .login input[type="radio"]:checked::before{ transform:scale(1); }
/* forgot password */
:is(#endkundenportal-ui, #endkunenportal-ui) .login .passwort-vergessen{
margin-top:8px; display:flex; justify-content:flex-end; align-items:center;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login .passwort-vergessen a{
color: var(--brand); font-weight:700; text-decoration:none;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login .passwort-vergessen a:hover{ text-decoration:underline; }
/* CTA */
:is(#endkundenportal-ui, #endkunenportal-ui) .login .btn.btn-primary.btn-block{
height:60px; border-radius:50px; border:1px solid transparent;
background: var(--brand); color: var(--brand-ink);
font: 700 15px/normal 'Plus Jakarta Sans', system-ui, sans-serif;
padding-left:24px; padding-right:72px; margin-top:14px; position:relative;
box-shadow: 0 18px 42px rgba(140,242,102,.28);
transition: transform .02s, box-shadow .22s, filter .22s;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login .btn.btn-primary.btn-block:hover{
filter:saturate(108%); box-shadow:0 22px 52px rgba(140,242,102,.34);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login .btn.btn-primary.btn-block:active{ transform: translateY(1px); }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .btn.btn-primary.btn-block::after{
content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%);
width:46px; height:46px; border-radius:50%;
background:
url("data:image/svg+xml;utf8,\
") center/19px 16px no-repeat,
radial-gradient(120% 120% at 30% 30%, #FFFFFF 0%, #F3F3F3 65%, #E9E9E9 100%);
box-shadow:0 8px 18px rgba(0,0,0,.22);
pointer-events:none;
}
/* Corner logo only on login (nav hidden there) */
:is(#endkundenportal-ui, #endkunenportal-ui):has(.login) .endkundenportal-navigation{ display:none; }
:is(#endkundenportal-ui, #endkunenportal-ui):has(.login)::after{
content:""; position:fixed; left:44px; bottom:34px; width:250px; height:54px;
background: var(--corner-logo) center/contain no-repeat;
filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
pointer-events:none; z-index:6;
}
/* ---------- MOBILE: form-only, centered ------------------------------- */
@media (max-width: 980px){
:is(#endkundenportal-ui, #endkunenportal-ui) .content::before,
:is(#endkundenportal-ui, #endkunenportal-ui) .content::after{ display:none; }
:is(#endkundenportal-ui, #endkunenportal-ui)::after{ content:none; }
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation,
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom{ display:none; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container{
position:relative; inset:auto; min-height:100svh;
display:grid; grid-template-columns:1fr;
align-content:center; justify-items:center; gap:14px;
padding:28px 20px 40px; background:var(--bg-deep);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .login h1{ display:none; }
:is(#endkundenportal-ui, #endkunenportal-ui) .login .btn.btn-primary.btn-block,
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container > .row,
:is(#endkundenportal-ui, #endkunenportal-ui) .login form.container > .row > .col,
:is(#endkundenportal-ui, #endkunenportal-ui) .login .form-group,
:is(#endkundenportal-ui, #endkunenportal-ui) .login .passwort-vergessen{ max-width: none; width:100%; }
}
/* =====================================================================
DASHBOARD (logged in, .landing present)
===================================================================== */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing){
background: var(--bg-deep);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing)::before,
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing)::after{ content:none; }
/* top bar: logo left, only "Abmelden" right */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation{
position: fixed; inset: 0 0 auto 0; height: 70px; background: transparent; z-index: 40; pointer-events:none;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-brand{
position: fixed; top:24px; left:28px; pointer-events:auto;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-brand img{
height:36px; width:auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation #navbarToggler,
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-toggler,
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-nav.mr-auto,
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation hr{ display:none; }
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-nav.my-2{
position: fixed; right:32px; top:26px; pointer-events:auto;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.my-2 .nav-link{
color:#fff; font:700 14px/1 'Plus Jakarta Sans',system-ui,sans-serif; text-decoration:none; padding-left:26px; position:relative;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.my-2 .nav-link::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:18px; height:18px;
background:
url("data:image/svg+xml;utf8,\
") center/18px 18px no-repeat;
}
/* grid + hero */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container{
max-width:1240px; margin:0 auto; padding:120px 40px 84px;
display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr));
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container > .row{ display:contents; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child{ grid-column:1 / -1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child p{ margin:0 0 8px; font-size:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child .text__anschlussnutzer{
display:block; color:#fff; font:900 clamp(34px,6.4vw,64px)/1.08 'Plus Jakarta Sans',system-ui,sans-serif;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child .text__anschlussnutzer::before{
content:"Willkommen"; display:block; margin-bottom:8px; font:900 clamp(28px,4.6vw,48px)/1.04 'Plus Jakarta Sans',system-ui,sans-serif;
}
/* tiles — dark contour + arrow chip + route icons */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button{ margin:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a{
--bd: rgba(255,255,255,.22);
--bd-hover: rgba(255,255,255,.34);
position:relative; display:flex; align-items:flex-end;
min-height:172px; padding:24px 24px 26px 84px;
color:#163300; text-decoration:none;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
border:1px solid var(--bd); border-radius:12px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.22);
font:800 16px/1.35 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:.1px;
transition: border-color .2s, transform .12s, box-shadow .25s, filter .25s;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a:hover{
transform:translateY(-2px); border-color:var(--bd-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 28px rgba(0,0,0,.28);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::after{
content:""; position:absolute; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%;
background:
url("data:image/svg+xml;utf8,\
")
center/20px 16px no-repeat,
radial-gradient(120% 120% at 30% 30%, #FFFFFF 0%, #F3F3F3 65%, #E9E9E9 100%);
box-shadow:0 8px 18px rgba(0,0,0,.22);
pointer-events:none;
}
/* left icons per route */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::before{
content:""; position:absolute; left:22px; top:22px; width:48px; height:48px; opacity:.96;
background-position:center; background-repeat:no-repeat; background-size:48px 48px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/dokumente"]::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/vertraege"]::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/daten/uebersicht"]::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/ablesung"]::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/passwort"]::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/kontakt"],
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a[href*="/kontaktanfrage"]::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
/* dashboard footer (only on landing) */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) ~ .footer-starqstrom{
display:block; position:fixed; right:40px; bottom:34px; z-index:3;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom > div{ display:flex; gap:26px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom a{
color:#fff; font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif; text-decoration:none; opacity:.95;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom a:hover{ text-decoration:underline; opacity:1; }
/* dashboard responsive */
@media (max-width:1200px){
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container{
grid-template-columns:repeat(2, minmax(240px, 1fr));
padding:108px 28px 72px; gap:20px;
}
}
@media (max-width:700px){
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-brand{ top:18px; left:18px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-nav.my-2{ top:20px; right:18px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container{
grid-template-columns:1fr; padding:92px 20px 68px; gap:16px;
}
}
/* =====================================================================
INNER PAGES (not login, not landing)
===================================================================== */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:not(:has(.login)):not(:has(.landing)){
background: var(--bg-deep);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation{
position: sticky; top:16px; z-index:30; background:transparent;padding-bottom: 60px !important;border-bottom: none;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .container{
display:flex; align-items:center; gap:18px;
padding:10px 16px; border-radius:999px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
border: 1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .nav-link{
color: var(--ink); font-weight:700; text-decoration:none;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .nav-link.active{
color: var(--brand);
}
/* =====================================================================
DASHBOARD – Figma match (cards = green + white border, full-width title,
no navbar underline on dashboard)
===================================================================== */
/* Use the same green inside the tiles */
:is(#endkundenportal-ui, #endkunenportal-ui){
--dash-card-bg: var(--bg-deep);
--dash-border: rgba(255,255,255,.72);
--dash-border-hover: rgba(255,255,255,.9);
}
/* 1) Remove the white underline / divider under the navbar on the dashboard */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation,
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation.navbar,
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .container{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation hr{
display:none !important;
}
/* 2) Full-width hero title (already spans columns, just make it bold & roomy) */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child{ grid-column:1 / -1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child p{ margin:0 0 10px; font-size:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child .text__anschlussnutzer{
display:block; width:100%;
color:#fff;
font: 900 clamp(44px, 7.6vw, 72px)/1.06 'Plus Jakarta Sans', system-ui, sans-serif;
letter-spacing:.2px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child .text__anschlussnutzer::before{
content:"Willkommen";
display:block; margin-bottom:10px;
font: 900 clamp(32px, 5vw, 56px)/1.04 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* 3) Cards = same green as background, white border only (no grey overlay) */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button{ margin:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a{
position:relative;
display:flex; align-items:flex-end;
min-height: 190px; /* like the comp */
padding: 24px 24px 26px 84px;
color:#163300; text-decoration:none;
background: var(--dash-card-bg) !important; /* same green as page */
border: 1.5px solid var(--dash-border);
border-radius: 12px;
box-shadow: none; /* no inner/outer soft fill */
font: 800 16px/1.35 'Plus Jakarta Sans',system-ui,sans-serif;
letter-spacing:.1px;
transition: border-color .18s, transform .12s, box-shadow .22s, filter .22s;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a:hover{
transform: translateY(-2px);
border-color: var(--dash-border-hover);
}
/* Arrow chip (unchanged, just smaller offset to match spacing) */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::after{
content:""; position:absolute; right:16px; bottom:16px;
width:46px; height:46px; border-radius:50%;
background:
url("data:image/svg+xml;utf8,\
")
center/20px 16px no-repeat,
radial-gradient(120% 120% at 30% 30%, #FFFFFF 0%, #F3F3F3 65%, #E9E9E9 100%);
box-shadow:0 8px 18px rgba(0,0,0,.22);
pointer-events:none;
}
/* Icons top-left (keep your route mapping; only adjust size/pos) */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::before{
content:""; position:absolute; left:22px; top:22px;
width:48px; height:48px; opacity:.96;
background-position:center; background-repeat:no-repeat; background-size:48px 48px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
/* Grid container stays as you have it; keeping columns/gaps */
/* Dashboard + cards = #0e3f03 */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing){
background: #0e3f03 !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a{
background: #0e3f03 !important; /* same green as page */
box-shadow: none !important; /* keep it flat */
}
/* ====================== CARDS — match screenshot ====================== */
:is(#endkundenportal-ui, #endkunenportal-ui){
--card-bg: #0e3f03; /* same as page */
--card-bd: rgba(255,255,255,.82); /* white border */
--card-bd-hover: #ffffff;
--card-min-h: 210px;
--card-pad-x: 24px;
--card-pad-left: 84px; /* room for the icon */
--card-radius: 12px;
--arrow-d: 50px; /* white arrow chip size */
}
/* base tile look: flat green, white border, text bottom-left */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button{ margin:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a{
position: relative;
display: flex; align-items: flex-end; /* label at the bottom-left */
min-height: var(--card-min-h);
padding: 24px var(--card-pad-x) 26px var(--card-pad-left);
background: #64875c !important;
border: 1.5px solid var(--card-bd);
border-radius: var(--card-radius);
box-shadow: none !important;
color: #163300; text-decoration: none;
font: 800 16px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
letter-spacing: .1px;
transition: border-color .18s, transform .1s ease-out;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a:hover{
border-color: var(--card-bd-hover);
transform: translateY(-1px);
}
/* top-left feature icon (you already map per-route below; this just sizes it) */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::before{
content:"";
position:absolute; left:22px; top:22px;
width:48px; height:48px; opacity:.96;
background-position:center; background-repeat:no-repeat; background-size:48px 48px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
/* right-side white arrow chip – vertically centered like in your screenshot */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::after{
content:"";
position:absolute; right:18px; top:50%; transform:translateY(-50%);
width:var(--arrow-d); height:var(--arrow-d); border-radius:50%;
background:
url("data:image/svg+xml;utf8,\
")
center/20px 16px no-repeat,
#ffffff;
box-shadow: 0 6px 16px rgba(0,0,0,.22);
pointer-events:none;
}
/* keep your existing per-route icon mappings (unchanged) */
/* ——— Use your arrow SVG inside the white chip ——— */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::after{
/* same size/position as before */
content:"";
position:absolute; right:16px; top:50%; transform:translateY(-50%);
width:50px; height:50px; border-radius:50%;
/* your SVG path (fill #163201) centered on a white circle */
background:
url("data:image/svg+xml;utf8,\
")
center/20px 16px no-repeat,
#ffffff;
box-shadow: 0 6px 16px rgba(0,0,0,.22);
pointer-events:none;
}
/* ——— First tile row spans full width; rest auto-flow in the 3-col grid ——— */
/* (Row 1 is the welcome. Row 2 = first tile “/ablesung”) */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container > .row{ display: contents; } /* flatten rows into grid */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:nth-child(1) > .col{ grid-column: 1 / -1; }
/* ===== Dashboard card tweaks (arrow inline + narrower cards) ===== */
/* 1) Slightly narrower columns */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container{
/* three fixed-ish columns with extra air between */
grid-template-columns: repeat(3, 340px);
}
/* responsive fallbacks */
@media (max-width: 1180px){
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container{
grid-template-columns: repeat(2, 340px);
justify-content: center;
}
}
@media (max-width: 760px){
:is(#endkundenportal-ui, #endkunenportal-ui) .landing.container{
grid-template-columns: 1fr;
justify-content: stretch;
}
}
/* 2) Put label + arrow on the same line at the bottom */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a{
align-items: flex-end; /* keep content at the bottom edge */
line-height: 1.15; /* tighter, like the comp */
padding-right: 92px; /* reserve space for the arrow chip */
}
/* 3) Replace arrow icon with your SVG + align to the baseline row */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a::after{
top: auto; /* move from centered to the bottom row */
bottom: 18px; /* sits on the same “line” as the label */
transform: none;
width: 48px;
height: 48px;
border-radius: 50%;
background:
/* your requested SVG (fill #163201) */
url("data:image/svg+xml;utf8,\
") center/20px 16px no-repeat,
#ffffff;
box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
/* 4) (Optional) tighten the card a touch more to match Figma spacing */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .landing-button a{
min-height: 184px;
padding-bottom: 24px;
}
/* 1) Smaller hero title */
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child .text__anschlussnutzer{
/* was clamp(44px, 7.6vw, 72px) */
font: 900 clamp(20px, 2.8vw, 56px)/1.04 'Plus Jakarta Sans', system-ui, sans-serif;
letter-spacing: .2px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .landing .row:first-child .text__anschlussnutzer::before{
/* was clamp(32px, 5vw, 56px) */
font: 900 clamp(20px, 2.8vw, 40px)/1.04 'Plus Jakarta Sans', system-ui, sans-serif;
margin-bottom: 8px;
}
/* Swap navbar logo to the login/corner logo */
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand img{
display: none !important; /* hide the inline base64 SVG */
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand a{
display: block;
width: clamp(170px, 18vw, 260px);
height: clamp(28px, 4.4vw, 20px);
background: var(--corner-logo) left center / contain no-repeat; /* same asset as login */
filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
/* ================================================================
INNER PAGES — solid green, pill nav, buttons + inputs like Figma
(scope covers both id spellings)
================================================================ */
:is(#endkundenportal-ui, #endkunenportal-ui){
--page-green: #0e3f03; /* figma green */
--ink: #EAF3EE;
--ink-strong:#fff;
--brand:#89EE48;
--brand-ink:#093d21;
--corner-logo: url("https://starqstrom.de/auftragsstrecke/strecke/assets/images/twosee_corner_logo.png");
}
/* 1) Solid green – remove the big login photo/curtain on inner pages */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)){
background: var(--page-green) !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))::before,
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))::after{
content:none !important;
}
/* 2) Pill/blur nav like the Figma */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation{
position: sticky; top:18px; z-index:40; background:transparent;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .container{
display:flex; align-items:center; gap:18px;
padding:10px 16px;
margin:0 auto; /* center the pill */
width:max-content; /* fit its contents */
border-radius:999px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
border: 1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* Replace the SVG ![]()
with the login logo, no HTML changes */
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-brand{
width:170px; height:38px; margin-right:6px; position:relative;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-brand img{ opacity:0; width:0; height:0; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-brand a{
display:block; width:100%; height:100%;
background: var(--corner-logo) left center/contain no-repeat;
text-indent:-9999px; overflow:hidden;
}
/* Nav links inside the pill */
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.mr-auto .nav-link{
color:#fff; opacity:.95; text-decoration:none;
font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;
padding:10px 14px; border-radius:999px;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.mr-auto .nav-link:hover{ opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.mr-auto .nav-link.active{ color:var(--brand); }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation hr{ display:none; }
/* Abmelden on the right with the exit icon (kept from earlier) */
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.my-2 .nav-link{
color:#fff; font:700 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;
padding-left:26px; position:relative; text-decoration:none;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.my-2 .nav-link::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:18px; height:18px;
background:
url("data:image/svg+xml;utf8,\
") center/18px 18px no-repeat;
}
/* 3) Headings + section rows readable on green */
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht h3,
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht h4{ color:#fff; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.vertrag-detail__key-value > div{
display:grid; grid-template-columns: 280px 1fr; gap:12px;
padding:10px 0; border-bottom:1px solid rgba(255,255,255,.16);
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.vertrag-detail__key-value > div > span:first-child{ color:rgba(255,255,255,.88); }
:is(#endkundenportal-ui, #endkunenportal-ui)
.vertrag-detail__key-value .value-oder-placeholder{ color:#fff; font-weight:700; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.vertrag-detail__key-value .placeholder{ color:rgba(255,255,255,.65); }
/* Remove any “card” masking on these sections */
:is(#endkundenportal-ui, #endkunenportal-ui) .mask-me{ background:transparent !important; box-shadow:none !important; }
/* 4) Buttons — same look as login (brand green pill) */
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary{
height:44px; border-radius:999px; border:1px solid transparent;
padding:0 22px;
background:var(--brand); color:var(--brand-ink);
font:700 14px/44px 'Plus Jakarta Sans',system-ui,sans-serif;
box-shadow:0 14px 34px rgba(140,242,102,.26);
transition: filter .2s, transform .02s, box-shadow .22s;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary:hover{
filter:saturate(108%); box-shadow:0 18px 44px rgba(140,242,102,.33);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary:active{ transform:translateY(1px); }
/* Make the “Alle Rechnungsadressen anzeigen” button compact, not full-width */
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht__btn-nav{
width:auto !important; display:inline-flex;
margin-top:16px;
}
/* 5) Inputs on inner pages — reuse login styling/colors */
:is(#endkundenportal-ui, #endkunenportal-ui) .form-control{
height:56px; border-radius:32px; padding:0 22px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
color:#fff; font-size:15px; letter-spacing:.2px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .form-control::placeholder{ color:#fff; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .form-group:has(.form-control:focus) .form-control{
border-color: var(--brand);
background: rgba(255,255,255,.12);
box-shadow: 0 0 0 3px rgba(137,238,72,.22), 0 10px 26px rgba(0,0,0,.30);
}
/* 6) Info bar in “Aktuelle Bankverbindung” like Figma track */
:is(#endkundenportal-ui, #endkunenportal-ui) .alert.alert-info{
color:#fff; background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.22);
border-radius:999px; padding:12px 18px; margin:8px 0 16px;
text-align:center;
}
/* 7) Tidy page width/spacing */
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht.container{
max-width:1100px; margin:0 auto; padding-top:84px;
}
/* === SUB-PAGES NAV — pill bg + white text ============================ */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation{
position: sticky; top: 16px; z-index: 50; background: transparent !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .container{
display:flex; align-items:center; gap:18px;
margin: 0 auto; width: max-content; /* compact “pill” */
padding: 12px 16px; border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
border: 1px solid rgba(255,255,255,.22) !important;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* White links on sub-pages (Bootstrap's .navbar-light can override, so use !important) */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .navbar-nav.mr-auto .nav-link{
color: #fff !important; opacity:.95; text-decoration:none;
font: 700 15px/1 'Plus Jakarta Sans',system-ui,sans-serif;
padding: 8px 14px; border-radius: 999px;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .navbar-nav.mr-auto .nav-link:hover{
opacity:1;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .navbar-nav.mr-auto .nav-link.active{
color: #89EE48 !important; /* brand green for active */
}
/* “Abmelden” on the right — keep it white + exit icon */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .navbar-nav.my-2 .nav-link{
color:#fff !important; font:700 15px/1 'Plus Jakarta Sans',system-ui,sans-serif;
padding-left:26px; position:relative;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .navbar-nav.my-2 .nav-link::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:18px; height:18px;
background:url("data:image/svg+xml;utf8,\
") center/18px 18px no-repeat;
}
/* Hide the divider line that sometimes shows under the nav */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation hr{ display:none !important; }
/* ================= SUB-PAGES — FULL-WIDTH PILL NAV ================== */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation{
position: sticky; top:14px; z-index:50; background:transparent !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) .endkundenportal-navigation .container{
/* stretch almost edge-to-edge with small gutters */
width: calc(100% - 32px);
margin: 0 auto;
padding: 10px 18px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
border: 1px solid rgba(255,255,255,.22) !important;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation hr{ display:none !important; }
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand{ margin-right:12px; flex:0 0 auto; }
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand img{ opacity:0; width:0; height:0; } /* hide inline svg */
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand a{
display:block; width:170px; height:38px;
background: url("https://starqstrom.de/auftragsstrecke/strecke/assets/images/twosee_corner_logo.png")
left center / contain no-repeat;
text-indent:-9999px; overflow:hidden;
}
/* left nav links */
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.mr-auto{
display:flex; gap:22px; align-items:center;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.mr-auto .nav-link{
color:#fff !important; font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif; text-decoration:none;
padding:8px 14px; border-radius:999px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.mr-auto .nav-link.active{
color:#89EE48 !important; /* brand green */
}
/* Abmelden (right) */
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.my-2 .nav-link{
color:#fff !important; font:700 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;
padding-left:26px; position:relative; text-decoration:none;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.my-2 .nav-link::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:18px; height:18px;
background:url("data:image/svg+xml;utf8,\
") center/18px 18px no-repeat;
}
/* =============== DOCUMENTS — WHITE TEXT + WHITE BORDERS ============== */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:not(:has(.login)){
background:#0e3f03 !important; /* solid green everywhere */
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht h3{ color:#fff; }
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht .mask-me{
background:transparent !important; box-shadow:none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-anzeigen{
display:grid; gap:16px;
}
/* each document row becomes transparent with white border */
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige{
display:grid; grid-template-columns: 1fr auto; align-items:center;
padding:18px 20px;
background:transparent !important;
border:1.5px solid rgba(255,255,255,.82);
border-radius:12px;
color:#fff;
}
/* left block = tidy key/value grid */
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige > div:first-child{
display:grid; grid-template-columns: 220px 1fr; column-gap:18px; row-gap:6px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__key-value{ display:contents; }
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__key-value label{
color:rgba(255,255,255,.72); margin:0;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__key-value span{ color:#fff; }
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__key-value b{ color:#fff; }
/* download icon => white */
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__download{ padding-left:16px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__download .icon-download{
color:#fff; filter: invert(1) brightness(1.2);
opacity:.95;
}
/* =========================================================
SUB PAGES — solid green, full-width pill nav, white text
(covers both id spellings)
========================================================= */
:is(#endkundenportal-ui, #endkunenportal-ui){
--page-green:#0e3f03;
--brand:#89EE48;
--brand-ink:#093d21;
}
/* Solid green + remove overlays */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)){
background:var(--page-green) !important;
color:#fff;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))::before,
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))::after{ content:none !important; }
/* ---------- Full-width pill navigation (Figma) ---------- */
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation{ position:sticky; top:16px; z-index:40; background:transparent; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .container{
width:calc(100% - 48px); /* stretch pill */
margin:0 auto;
padding:14px 22px;
border-radius:58px;
display:flex; align-items:center; gap:18px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation hr{ display:none; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-brand{ width:220px; height:38px; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-brand img{ opacity:0; width:0; height:0; } /* hide inline svg logo */
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-brand a{
display:block; width:100%; height:100%;
background:url("https://starqstrom.de/auftragsstrecke/strecke/assets/images/twosee_corner_logo.png") left center/contain no-repeat;
text-indent:-9999px; overflow:hidden;
}
/* center nav links, logout on right */
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.mr-auto{
flex:1 1 auto; display:flex; justify-content:center; gap:6px;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .navbar-nav.my-2{ margin-left:auto; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .nav-link{
color:#fff; opacity:.96; text-decoration:none; font-weight:700;
padding:10px 14px; border-radius:999px;
}
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .nav-link:hover{ opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui)
.endkundenportal-navigation .nav-link.active{ color:var(--brand); }
/* ---------- Buttons on sub pages ---------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary{
height:48px; border-radius:999px; border:1px solid transparent;
padding:0 24px; background:var(--brand); color:var(--brand-ink);
font-weight:700; box-shadow:0 14px 34px rgba(140,242,102,.26);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary:hover{
filter:saturate(108%); box-shadow:0 18px 44px rgba(140,242,102,.33);
}
/* ---------------------------------------------------------
DOCUMENTS — single-color cards (green) with white borders
--------------------------------------------------------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht h3{ color:#fff; }
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht .mask-me{
background:transparent !important; box-shadow:none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht .dokument-anzeige{
display:grid; grid-template-columns:1fr auto; gap:16px;
padding:18px 20px; margin:18px 0;
background:transparent !important;
border:1.5px solid rgba(255,255,255,.82); border-radius:12px;
color:#fff;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht .dokument-anzeige__key-value label{
color:rgba(255,255,255,.85);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokumente-uebersicht .dokument-anzeige__download .icon-download{
color:#fff; opacity:.95;
}
/* ---------------------------------------------------------
CONTRACTS (Übersicht & Details) — make everything readable
--------------------------------------------------------- */
/* Overview page */
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-uebersicht h3,
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-uebersicht h4{ color:#fff; }
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-uebersicht .mask-me{
background:transparent !important; box-shadow:none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-uebersicht *{
color:#fff !important; /* labels + values go white */
}
/* Detail page */
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail h4{ color:#fff; border-bottom: solid #89f047;}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail .mask-me{
background:transparent !important; box-shadow:none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail .vertrag-detail__key-value > div,
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail .vertrag-detail-vertrag__key-value > div{
color:#fff;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail .vertrag-detail-vertrag__status{
color:#fff; background:transparent; border:1.5px solid rgba(255,255,255,.82); border-radius:8px; padding:10px 12px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail p{ color:#fff; opacity:.92; }
/* Make those long white bars transparent on green */
:is(#endkundenportal-ui, #endkunenportal-ui)
.vertrag-detail .vertrag-detail__key-value > div > span + div,
:is(#endkundenportal-ui, #endkunenportal-ui)
.vertrag-uebersicht .vertrag-uebersicht-detail__key-value > span + div{
background:transparent !important; border:none !important;
}
/* ---------------------------------------------------------
Inputs on sub pages (same look everywhere)
--------------------------------------------------------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .form-control{
height:56px; border-radius:32px; padding:0 22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
color:#fff; font-size:15px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .form-control::placeholder{ color:#fff; opacity:1; }
/* =========================================================
GLOBAL: replace white bars with green + white border
(applies to ALL inner pages; excludes login & dashboard)
========================================================= */
:is(#endkundenportal-ui, #endkunenportal-ui){
--page-green: #0e3f03; /* your site green */
--kv-bd: rgba(255,255,255,.85); /* white border */
}
/* Any “key-value” row block (most white bars live here) */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))
[class*="__key-value"] > div:not(.form-control),
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))
[class*="__key-value"] > span + div:not(.form-control){
background: var(--page-green) !important;
border:none;
color: #fff !important;
border-bottom: 1px solid #ffffff30;
}
/* If any pages render those bars as or plain spans inside */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))
[class*="__key-value"] > div > *{
color:#fff !important; font-weight: 500;
}
/* Documents & any other card-y “white boxes” get same treatment */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))
.dokument-anzeige{
background: var(--page-green) !important;
border: none !important;
}
/* Safety: nuke any leftover white fills that sneak in */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing))
[class*="__key-value"] > div[style*="background"],
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)) [style*="background-color:#fff"]{
background: var(--page-green) !important;
border-color: var(--kv-bd) !important;
}
/* ===== NAV: stretch full width and keep pill look ======================= */
.endkundenportal-navigation,
.endkundenportal-navigation .container{
max-width:100% !important;
width:100% !important;
}
.endkundenportal-navigation .container{
padding-left:24px; padding-right:24px;
}
/* ===== CONTACT PAGE (scoped to .kontaktanfrage) ======================== */
.kontaktanfrage-form h3{
color:#fff;
margin:24px 0 18px;
}
/* Labels + help text */
.kontaktanfrage-form label{
color:#dbead6;
font-weight:600;
}
/* --- Betreff dropdown: green pill with white border --- */
.kontaktanfrage .form-group .form-control.dropdown{
background:transparent !important;
border:2px solid #fff !important;
border-radius:999px;
padding:6px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.kontaktanfrage .dropdown .btn.dropdown-toggle{
width:100%;
background:transparent !important;
border:0 !important;
color:#fff !important;
font-weight:700;
text-align:center;
}
.kontaktanfrage .dropdown .btn.dropdown-toggle::after{
filter:invert(1); /* caret becomes white */
}
/* Dropdown menu */
.kontaktanfrage .dropdown-menu{
width:100%;
background:#143a0f;
border:1.5px solid rgba(255,255,255,.7);
color:#fff;
border-radius:14px;
padding:6px 0;
}
.kontaktanfrage .dropdown-item{
color:#fff;
padding:.6rem 1rem;
}
.kontaktanfrage .dropdown-item:hover,
.kontaktanfrage .dropdown-item__selected{
background:#245f19;
color:#fff;
}
/* --- Textarea: large white card with rounded corners --- */
.kontaktanfrage textarea.form-control{
background:#fff !important;
color:#0e3f03;
border:2px solid #fff !important;
border-radius:20px;
min-height:280px;
padding:18px 20px;
box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.kontaktanfrage textarea.form-control::placeholder{
color:rgba(30,30,30,.45);
}
/* --- Actions: full-width lime “Senden”, subtle “Abbrechen” ------------- */
.kontaktanfrage .form-container__actions{
display:block; /* stack buttons */
gap:16px;
}
.kontaktanfrage .btn-success{
width:100%;
border:0;
border-radius:999px;
padding:14px 20px;
font-weight:800;
color:#10260a; /* dark text on lime */
background:#8FE55A; /* lime like in Figma */
box-shadow:0 14px 36px rgba(143,229,90,.25);
}
.kontaktanfrage .btn-success:disabled{
opacity:.7; cursor:not-allowed;
}
.kontaktanfrage .btn-danger{
margin-top:14px;
background:transparent !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.55);
border-radius:999px;
padding:10px 16px;
}
/* spacing */
.kontaktanfrage-form .row + .row{ margin-top:18px; }
.kontaktanfrage-form{ margin-bottom:40px; }
/* Footer links readable on dark bg */
.footer-starqstrom a{ color:#dbead6; }
/* Kontakt: textarea text should be black on white bg */
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage textarea.form-control{
color:#111 !important; /* typed text */
caret-color:#111;
-webkit-text-fill-color:#111; /* Safari */
background:#fff !important; /* keep it white */
border:2px solid #fff !important;
box-shadow:0 8px 28px rgba(0,0,0,.18);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage textarea.form-control::placeholder{
color:#6b6b6b !important;
opacity:1;
}
/* make autofill not turn the text white */
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage textarea.form-control:-webkit-autofill{
-webkit-text-fill-color:#111 !important;
box-shadow:0 0 0 1000px #fff inset !important;
}
/* Betreff: outer white pill + inner dark glass, left-aligned text */
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .form-group .form-control.dropdown{
position:relative;
height:64px;
padding:0;
border:2px solid #fff !important;
border-radius:999px;
background:transparent !important;
box-shadow:0 16px 36px rgba(0,0,0,.26);
overflow:hidden;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .form-group .form-control.dropdown::before{
content:"";
position:absolute; inset:6px; /* creates the inner pill */
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown .btn.dropdown-toggle{
position:relative; z-index:1;
display:flex; align-items:center; justify-content:space-between;
height:100%;
width:100%;
padding:0 22px;
text-align:left; /* was centered */
color:#fff !important;
font-weight:800;
background:transparent !important;
border:0 !important;
}
/* white caret */
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown .btn.dropdown-toggle::after{
content:""; width:10px; height:6px; margin-left:12px;
background:#fff; mask:url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
-webkit-mask:url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
border:0;
}
/* dropdown menu keeps the dark look */
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown-menu{
width:100%; margin-top:8px;
background:#143a0f;
border:1.5px solid rgba(255,255,255,.7);
color:#fff; border-radius:14px; padding:6px 0;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown-item{
color:#fff; padding:.6rem 1rem;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown-item:hover,
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown-item__selected{
background:#245f19; color:#fff;
}
/* Kontaktdaten ändern — inputs: white text + white placeholders */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control{
color:#fff !important; /* typed text */
caret-color:#fff;
-webkit-text-fill-color:#fff; /* Safari */
background:rgba(255,255,255,.10) !important;
border:1px solid rgba(255,255,255,.22) !important;
}
/* placeholders (all engines) */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control::placeholder{
color:#fff !important; opacity:1;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control::-webkit-input-placeholder{
color:#fff !important; opacity:1;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control::-moz-placeholder{
color:#fff !important; opacity:1;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control:-ms-input-placeholder{
color:#fff !important; opacity:1;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control::-ms-input-placeholder{
color:#fff !important; opacity:1;
}
/* keep autofill from turning the text dark/green */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .form-control:-webkit-autofill{
-webkit-text-fill-color:#fff !important;
box-shadow:0 0 0 1000px rgba(255,255,255,.10) inset !important;
}
/* (nice-to-have) align the delete button to the dark theme */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .input-group-append .btn.round-me{
background:transparent !important;
border:1.5px solid rgba(255,255,255,.55);
color:#fff;
border-radius:999px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-kontaktdaten-form .input-group-append .icon-bin{
filter:invert(1) brightness(1.2); /* makes the bin icon white */
}
/* Make the whole page green and remove default margins */
html, body{
margin:0;
background:#0e3f03; /* fallback if anything bleeds outside */
}
/* Let the wrapper own the full viewport height */
:is(#endkundenportal-ui, #endkunenportal-ui){
min-height:100svh; /* svh fixes mobile URL bar jumps */
display:flex;
flex-direction:column;
background:#0e3f03; /* green behind both content + footer */
}
/* Content fills the available space (no extra scroll) */
:is(#endkundenportal-ui, #endkunenportal-ui) .content{
flex:1 0 auto;
min-height:0; /* overrides any earlier 100vh on inner pages */
}
/* Keep footer at the bottom without adding page height */
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom{
margin-top:auto;
background:transparent;
}
/* Keep your login screen tall if you want the split look there */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.login){
min-height:100svh; /* only on the login stage */
}
/* Safety: avoid accidental sideways scroll from big shadows */
html, body{ overflow-x:hidden; }
/* Footer: bottom-right globally, hidden on login */
:is(#endkundenportal-ui, #endkunenportal-ui):has(.login) .footer-starqstrom{
display: none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom{
position: fixed !important;
right: clamp(16px, 2.6vw, 40px);
bottom: clamp(12px, 2.2vw, 34px);
z-index: 60;
margin: 0 !important;
background: transparent !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom > div{
display: flex;
align-items: center;
gap: 26px;
white-space: nowrap;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom a{
color: #fff !important;
text-decoration: none;
font: 700 13px/1 'Plus Jakarta Sans', system-ui, sans-serif;
opacity: .95;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom a:hover{
opacity: 1;
text-decoration: underline;
}
/* Small screens: a little tighter spacing */
@media (max-width: 640px){
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom{ right: 12px; bottom: 12px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom > div{ gap: 16px; }
}
/* Footer: show in normal document flow at the bottom, left-aligned */
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom{
position: static !important; /* undo fixed */
right: auto !important;
bottom: auto !important;
margin: 28px 0 20px;
padding: 36px 38px; /* small side gutters */
background: transparent !important;
z-index: auto !important;
}
/* Row of links, aligned left like the content */
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom > div{
width: calc(100% - 48px); /* match gutters above */
margin: 0 auto;
display: flex;
justify-content: flex-end; /* left side */
align-items: center;
gap: 26px;
white-space: nowrap;
}
/* Keep links readable */
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom a{
color: #fff !important;
text-decoration: none;
font: 700 13px/1 'Plus Jakarta Sans', system-ui, sans-serif;
opacity: .95;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .footer-starqstrom a:hover{
opacity: 1; text-decoration: underline;
}
/* Still hide on the login screen */
:is(#endkundenportal-ui, #endkunenportal-ui):has(.login) .footer-starqstrom{
display: none !important;
}
/* keep the originals hidden */
.col p{
white-space: nowrap;
font-size: 0; /* hides the raw text + span */
margin: 0;
}
.col p::before{
/*content: "Angemeldet als Marktpartner Sammlung";*/
/* make it big + white */
font-size: 2rem; /* tweak: 1.75–2.25rem as you like */
line-height: 1.2;
font-weight: 700;
color: var(--ink, #fff); /* uses your theme var, falls back to white */
letter-spacing: .01em;
display: inline-block;
}
/* we don't need the span anymore */
.col p .text__anschlussnutzer{ display: none !important; }
/* ===========================================================
ABLESUNG ERFASSEN — STARQ look & feel (scoped)
=========================================================== */
:is(#endkundenportal-ui, #endkunenportal-ui){
--page-green: #0e3f03;
--brand: #89EE48;
--brand-ink: #093d21;
}
/* Page container + title */
:is(#endkundenportal-ui, #endkunenportal-ui) .form-container.ablesung.container{
max-width: 1100px;
margin: 0 auto;
padding-top: 84px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung h3{ color:#fff; }
/* Alerts: soft rounded cards */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .alert{
border: 0 !important;
border-radius: 12px;
padding: 14px 18px;
box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .alert-danger{
background:#f4c6ca; color:#5b0b0b;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .alert-warning{
background:#fde6b6; color:#5a3a00;
}
/* Labels */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung label{
color:#dbead6; font-weight:600;margin-bottom: 15px;
}
/* --- Zählernummer (dropdown) ---------------------------------------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .dropdown-group .form-control.dropdown{
background: transparent !important;
border: 2px solid #fff !important;
border-radius: 999px;
padding: 6px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10),
0 18px 34px rgba(0,0,0,.20);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .dropdown-group .btn.dropdown-toggle{
width: 100%;
height: 48px;
border: 0 !important;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10)) !important;
color:#fff !important; font-weight:800; text-align:left;
padding: 0 18px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .dropdown-group .btn.dropdown-toggle::after{
filter: invert(1); /* white caret */
}
/* --- Datepicker ------------------------------------------------------ */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__wrapper{
height:56px; border-radius:50px; padding:0 12px;
background: rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__inputGroup input,
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__inputGroup select{
background:transparent; border:0; color:#fff; font-weight:700; outline:none;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__inputGroup__divider{ color:#fff; opacity:.8; }
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__inputGroup__input::placeholder{ color:#fff; opacity:.7; }
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__button{ background:transparent; border-radius:10px; }
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .react-date-picker__button svg{ stroke:#fff; }
/* --- Filepicker: big lime button + white hint ------------------------ */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .filepicker{ background:transparent !important; border:0; box-shadow:none; padding:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .filepicker .button-group{ width:100%; }
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .filepicker .btn.btn-default.btn-primary{
display:block; width:100%;
border:0; border-radius:999px; padding:14px 20px;
background: var(--brand) !important; color: var(--brand-ink) !important; font-weight:800;
box-shadow: 0 14px 36px rgba(143,229,90,.25);
text-align:center;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .filepicker__placeholder{
margin-top:10px; color:#fff; opacity:.92;
}
/* --- Actions --------------------------------------------------------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .form-container__actions{
display:flex; justify-content:space-between; align-items:center; gap:16px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .btn-danger{
background:transparent !important; color:#fff !important;
border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:10px 16px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .btn-success{
border:0; border-radius:8px; padding:12px 18px; font-weight:700;
background:#2f8f44; color:#fff;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung .btn-success:disabled{
background: var(--brand); color: var(--brand-ink); opacity:.75;
}
/* Small niceties */
:is(#endkundenportal-ui, #endkunenportal-ui) .ablesung select option{ background:#0e3f03; color:#fff; }
/* Passwort ändern — white text + placeholders */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password h1{
color:#fff;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password label,
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-text{
color:#dbead6 !important; /* help text too */
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-control{
height:56px;
border-radius:32px;
padding:0 22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
color:#fff !important; /* typed text (incl. password dots) */
-webkit-text-fill-color:#fff; /* Safari */
caret-color:#fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
/* white placeholders in all engines */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-control::placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-control::-webkit-input-placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-control::-moz-placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-control:-ms-input-placeholder{ color:#fff !important; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-control::-ms-input-placeholder{ color:#fff !important; opacity:1; }
/* focus glow like the rest of the site */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .form-group:has(.form-control:focus) .form-control{
border-color:#89EE48;
background:rgba(255,255,255,.12);
box-shadow:0 0 0 3px rgba(137,238,72,.22), 0 10px 26px rgba(0,0,0,.30);
}
/* buttons (unchanged look; included for completeness) */
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .btn.btn-primary{
border:0; border-radius:999px; height:60px;
background:#89EE48; color:#093d21; font-weight:800;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .change-password .btn.btn-danger{
background:#d84a4a; border:0; border-radius:10px;
}
/* =========================
STARQ • Datenübersicht – Figma-Match (Drop-in)
========================= */
:is(#endkundenportal-ui, #endkunenportal-ui){
--page-green: #0e3f03;
--ink: #fff;
--kv-bd: rgba(255,255,255,.85);
--brand:#89EE48;
--brand-ink:#093d21;
}
/* Seite: sauber grün, ohne Overlays */
:is(#endkundenportal-ui, #endkunenportal-ui)
.content:not(:has(.login)):not(:has(.landing)){
background:var(--page-green) !important;
}
/* Pill-Navigation (kompakt, mittig; Logo austauschen) */
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation{
position:sticky; top:16px; z-index:40; background:transparent !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .container{
width:calc(100% - 48px);
margin:0 auto;
padding:12px 18px;
display:flex; align-items:center; gap:18px;
border-radius:58px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation hr{ display:none !important; }
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand img{ opacity:0; width:0; height:0; }
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-brand a{
display:block; width:170px;
background:url("https://starqstrom.de/auftragsstrecke/strecke/assets/images/twosee_corner_logo.png") left center/contain no-repeat;
text-indent:-9999px; overflow:hidden;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.mr-auto{
display:flex; gap:10px; flex:1 1 auto; justify-content:center;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .nav-link{
color:#fff !important; font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif; text-decoration:none;
padding:8px 14px; border-radius:999px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .nav-link.active{ color:var(--brand) !important; }
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.my-2 .nav-link{
color:#fff !important; font:700 14px/1 'Plus Jakarta Sans',system-ui,sans-serif; padding-left:26px; position:relative;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .endkundenportal-navigation .navbar-nav.my-2 .nav-link::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:18px; height:18px;
background:url("data:image/svg+xml;utf8,\
") center/18px 18px no-repeat;
}
/* Container & Headings */
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht.container{
max-width:1100px; margin:0 auto; padding-top:0 !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht h3,
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht h4{ color:#fff; }
/* Header mit Stift (rund, weiß) */
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht__header-mit-nav{
display:flex; align-items:center; gap:10px; margin:14px 0 10px; border-bottom: solid #82e546;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht__header-mit-nav a{
width:28px; height:28px; display:grid; place-items:center;
border-radius:999px; background:#fff; color:#163201; text-decoration:none;
box-shadow:0 8px 16px rgba(0,0,0,.18);
}
/* Keine „Karten“-Masken */
:is(#endkundenportal-ui, #endkunenportal-ui) .mask-me{ background:transparent !important; box-shadow:none !important; }
/* Key-Value-Zeilen = grün + weiße Border, links Label, rechts Wert */
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail__key-value{
display:grid; gap:10px;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail__key-value > div{
display:grid; grid-template-columns:minmax(220px,280px) 1fr; align-items:center;
gap:12px; padding:12px 16px;
background:transparent !important;
color:#fff;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-detail__key-value > div > span:first-child{
color:rgba(255,255,255,.88);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .value-oder-placeholder{ color:#fff; font-weight:700; }
:is(#endkundenportal-ui, #endkunenportal-ui) .placeholder{ color:rgba(255,255,255,.65); }
/* Rechnungsadresse: Action-Button schmal */
:is(#endkundenportal-ui, #endkunenportal-ui) .daten-uebersicht__btn-nav{
width:auto !important; display:inline-flex; margin-top:14px;
}
/* Buttons (wie Login) */
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary{
height:44px; border-radius:999px; border:1px solid transparent;
padding:0 22px; background:var(--brand); color:var(--brand-ink);
font:700 14px/44px 'Plus Jakarta Sans',system-ui,sans-serif;
box-shadow:0 14px 34px rgba(140,242,102,.26);
}
/* Bankverbindung: Info-Track */
:is(#endkundenportal-ui, #endkunenportal-ui) .alert.alert-info{
color:#fff; background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.22);
border-radius:999px; padding:12px 18px; margin:8px 0 16px; text-align:center;
}
/* Formfelder (weiß auf grün) – falls hier Edit-Formulare kommen */
:is(#endkundenportal-ui, #endkunenportal-ui) .form-control{
height:56px; border-radius:32px; padding:0 22px;
background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
color:#fff; font-size:15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
:is(#endkundenportal-ui, #endkunenportal-ui) .form-control::placeholder{ color:#fff; opacity:1; }
:is(#endkundenportal-ui, #endkunenportal-ui) .form-group:has(.form-control:focus) .form-control{
border-color:var(--brand); background:rgba(255,255,255,.12);
box-shadow:0 0 0 3px rgba(137,238,72,.22), 0 10px 26px rgba(0,0,0,.30);
}
.landing-button {
background-color: #a0a0a000;
}
/* Betreff fix — allow the menu to escape the pill and make the overlay click-through */
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .form-group .form-control.dropdown{
overflow: visible !important; /* was hidden — clipped menu */
position: relative; /* anchor the abs menu */
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .form-group .form-control.dropdown::before{
pointer-events: none; /* overlay won't block clicks */
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown .btn.dropdown-toggle{
position: relative;
z-index: 2; /* above the ::before film */
pointer-events: auto;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .kontaktanfrage .dropdown-menu{
z-index: 1051; /* above neighbors (Bootstrap-ish) */
/* Optional: ensure it positions below the pill consistently */
top: 100% !important;
margin-top: 8px !important;
}
/* GLOBAL: weißes Dropdown-Caret überall im Kundenportal */
:is(#endkundenportal-ui,#endkunenportal-ui) .form-control.dropdown{
position: relative; /* Anker für unser Caret */
}
/* 1) Standard-Caret am Button überall abschalten */
:is(#endkundenportal-ui,#endkunenportal-ui)
.form-control.dropdown > .btn.dropdown-toggle::after{
display: none !important;
}
/* 2) Eigenes weißes Caret auf dem Wrapper zeichnen */
:is(#endkundenportal-ui,#endkunenportal-ui)
.form-control.dropdown::after{
content:"";
position:absolute;
top:50%; right:22px; transform:translateY(-50%);
width:12px; height:8px; pointer-events:none;
background:#fff;
/* sauberes Vektor-Chevron */
-webkit-mask:url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
}
/* Optional: Dropup-Support (Pfeil nach oben) */
:is(#endkundenportal-ui,#endkunenportal-ui)
.dropup .form-control.dropdown::after{
transform:translateY(-50%) rotate(180deg);
}
/* Optional: leicht ausgrauen, wenn der Button disabled ist */
:is(#endkundenportal-ui,#endkunenportal-ui)
.form-control.dropdown:has(.btn:disabled)::after{
opacity:.55;
}
/* Optische Zentrierung auf der Ablesung-Seite */
:is(#endkundenportal-ui,#endkunenportal-ui) .ablesung{
--nudge-y: -1px; /* ggf. -2px wenn's noch tief wirkt */
}
/* ZÄHLERNUMMER (Dropdown) – optisch mittiger */
:is(#endkundenportal-ui,#endkunenportal-ui)
.ablesung .dropdown-group .btn.dropdown-toggle{
display:flex;
align-items:center; /* echte Vertikal-Zentrierung */
justify-content:center; /* nur wenn du auch horizontal mittig willst */
line-height:1;
padding-left:22px;
padding-right:52px; /* Platz fürs Caret */
padding-top:0; /* Optik: leicht nach oben */
padding-bottom:0;
}
/* DATEPICKER – Inputs + Icon leicht anheben */
:is(#endkundenportal-ui,#endkunenportal-ui)
.ablesung .react-date-picker__wrapper{
display:flex; align-items:center; /* zentriert den Block im Feld */
}
:is(#endkundenportal-ui,#endkunenportal-ui)
.ablesung .react-date-picker__inputGroup{
display:flex; align-items:center;
transform: translateY(var(--nudge-y)); /* Optik-Nudge */
}
:is(#endkundenportal-ui,#endkunenportal-ui)
.ablesung .react-date-picker__calendar-button{
transform: translateY(var(--nudge-y));
}
/* FILEPICKER-Button – ebenfalls minimal höher */
:is(#endkundenportal-ui,#endkunenportal-ui)
.ablesung .filepicker .btn.btn-default.btn-primary{
line-height:1;
padding-top:15px;
padding-bottom:0;
}
.text-muted {
color: #84e645 !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .btn.btn-primary {
box-shadow: none !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .dokument-anzeige__download .icon-download::before{
filter: invert(1) brightness(2) !important; /* dreht schwarze Pixel auf weiß */
}
/* ---------- Force navbar always visible for static export ---------- */
:is(#endkundenportal-ui, #endkunenportal-ui) .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .navbar-toggler {
display: none !important;
}
/* Override: Show navbar on landing page for static export */
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation .navbar-nav.mr-auto {
display: flex !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
}
:is(#endkundenportal-ui, #endkunenportal-ui) .content:has(.landing) .endkundenportal-navigation #navbarToggler {
display: flex !important;
height: auto !important;
overflow: visible !important;
}
/* Fix: Enable pointer events on navbar links for static export */
:is(#endkundenportal-ui, #endkunenportal-ui) .navbar-nav a.nav-link {
pointer-events: auto !important;
}
.vertrag-uebersicht-detail__vertrag-inaktiv {
border-left-color: transparent;
}
.icon-power:before {
content: "";
}
:is(#endkundenportal-ui, #endkunenportal-ui) .vertrag-uebersicht .btn-primary {
color: #163300 !important;
}