auf die Browser-Standardgroesse zurueck und erbt
gleichzeitig die Absatz-Zeilenhoehe von .guideTextDraw - genau die
Kombination, die bei .formtitle oben schon korrigiert wurde. */
/* AEM renders an inner content div inside the field's own wrapper that carries
the same field-name class, so the rule above (correctly, by
itself) matches BOTH the outer wrapper and this inner div — doubling the
padding/margin/background. Reset the nested occurrence so the box styling
is applied only once; it keeps the flex/gap from the rule above, which is
what actually spaces the three paragraph lines. */
/* Colour comes from the theme, not the SVG file, so it always matches SWW
branding regardless of whatever fill is baked into the source asset. */
/* Repeatable Einsatzort blocks ("Weiteren Hydranten hinzufügen").
Section-to-section spacing is driven solely by the shared "h3 { margin-top: 40px }"
rule (project.less); the base .repeatable-element's own margin would add extra
space on top of that, making this section's gaps inconsistent with its
non-repeatable sibling sections, so margin is zeroed out here to line up with
the others. The 1px top/bottom padding is kept (only left/right zeroed) because
it deliberately blocks margin collapsing between this box and the "Einsatzort"
h3 title — .repeatable-remove's absolutely positioned trash button is anchored
to this box's padding edge (top:0; right:0), and removing that 1px would shift
the box's effective top past the button, misplacing it relative to the title. */
/* Base rule centers the icon inside the 54px hit area (justify-content: center),
which leaves a visible gap between the icon and the button's own right:0 edge.
Right-align it instead so the icon sits flush with the panel's right edge, and
nudge it down from the box's top edge to sit level with the "Einsatzort" title. */
/* "PV-Preis" (and every other step name shown in the summary, e.g.
"Allgemein") is rendered as a .step-label, not an h3 - confirmed by
walking the actual DOM, not just reading the review screenshot. Its
sibling .row wraps that step's first section title as an h3 several
levels down (.row > .col-md-12.step-level > .row > h3), which still
carries the base rule's full 32px margin-top; the .step-label's own
22px margin-bottom doesn't shrink that, since a following element's
top margin is what's compared against a preceding one's bottom margin
for collapsing, and 32 already exceeds 22. Target that first h3
directly and bring it down to the same 8px used above for title-to-
content spacing everywhere else. */
/* Consecutive label/value pairs (.row.item) inside a section render with
no gap between them, so nothing marks where one pair ends and the next
begins. */
/* The 50/50 split above is desktop-only; on mobile it crams label/value
pairs into a 375px-wide column, so let each stack full-width instead. */
/* ============================================================ */
/* Compact field pairs (Strasse+Nummer, PLZ+Ort, ...) */
/* ============================================================ */
/* Reusable across all forms: mark the narrow field of a two-field row
with .sww-col-narrow and the wide field with .sww-col-wide (via the
field's css attribute in the form's .content.xml). Below the point
where the base grid would otherwise stack every column to 100% width,
this keeps the pair side by side instead, matching the Figma mobile
design (e.g. house number next to street, ZIP next to city). Uses
:has() rather than hardcoded col-md-N selectors so it doesn't depend
on which grid column width the base runtime happens to render.
The actual runtime DOM nesting from a field-pair's .row down to the
hook class is always exactly ".row > [col] > .guidefield > [hook]"
(verified against the rendered Hydrant/EVG markup) — the ">" chain
below matches that exact depth. Without it, :has()'s unbounded
descendant search also matches the *outer* wizard row (whose
col-md-10 panel column contains, many levels deep, every field of
the current step, hook classes included), forcing that row into a
flex layout too and breaking the stepper/prev-next-arrow layout. */
/* ============================================================ */
/* Wizard toolbar buttons (Weiter/Zurück) */
/* ============================================================ */
/* Shared by every wizard-based form (EVG, IBAN, Hydrant, Confirmation):
.nextitemnav/.submit/.previtemnav (project.less) float left/right at
all widths today, which is too cramped for two full-width touch
targets on mobile. Stack them full-width instead.
Each button has its own single-child .afToolbarButton wrapper — the
real shared parent all three (previtemnav, nextitemnav, submit) sit
under as siblings is .guidetoolbar (verified against the rendered
markup), always in that DOM order regardless of which two are
visible on a given step. column-reverse there puts whichever of
next/submit is visible above previtemnav, matching the Figma mobile
design (primary action on top) on every step. */
/* ============================================================ */
/* Progress stepper labels */
/* ============================================================ */
/* project.less hides .progress-stepper-item-text entirely below 768px
(circles-only stepper). For SWW the step names should stay visible
on mobile too, so override that back to shown. */
/**
** EVG REQUEST
**/
/* Disable Bootstrap clearfix spacing on this formula row */
/* Main formula row */
/* Formula items */
/* Left card */
/* Input */
/* Result card */
/* Inner wrappers */
/* Price cards */
/* Card text */
/* Input field */
/* Unit inside input */
/* Minus icon */
/* Equals icon */
/* Mobile */
/* ============================================================ */
/* VZEV check — result list with checkbox per address */
/* ============================================================ */
/**
** IBAN CREDIT (Rückzahlung, SWWNR-15)
**/
/* Read-only case-info box on the "Informationen zur Rückzahlung erfassen" step.
Hook lives on a textdraw (css="sww-info-box"); the values are placeholders for
now and get populated from the case data once the backend is wired. */
/* Centered "Bestätigen" button on the Authentifizierung step. */
/* Sits directly under the success box, which brings no bottom margin of its own. */
/* Quittung download; the hook lives on a textdraw, the href is filled in at runtime. */
}
@media (max-width: 767px) {
body.industry-energy-sww {
padding: 0 24px;
}
}
@media (max-width: 767px) {
body.industry-energy-sww .guideheader,
body.industry-energy-sww .guidefooter {
width: calc(100% + 48px) !important;
margin-left: -24px;
margin-right: -24px;
}
}
body.industry-energy-sww .guideContainer {
flex: 1 0 auto;
}
body.industry-energy-sww .afHeader .containerbar {
height: 41px;
}
@media (max-width: 767px) {
body.industry-energy-sww .afHeader .containerbar {
display: block;
width: 140px;
height: 24px;
}
}
body.industry-energy-sww .formtitle {
padding-top: 60px;
/* The wrapper div also carries .guideTextDraw, which sets a fixed
18px/22px paragraph line-height (font-paragraph-small(), below) that
the
inherits — its own font-size is left at the browser's H1
default (36px) since nothing overrides it. On desktop the title
usually fits on one line, so the mismatch is invisible; on mobile
it wraps to 2+ lines and those lines visually overlap. Give the
actual heading its own explicit, matching type style instead of
inheriting the paragraph one. */
}
body.industry-energy-sww .formtitle h1 {
font-family: var(--din-bold);
font-size: 20px;
line-height: 26px;
font-weight: 700;
margin: 0;
}
body.industry-energy-sww .guidefield:not(.messagebox) {
margin-top: 3px;
margin-bottom: 12px;
padding-bottom: 6px;
}
body.industry-energy-sww button,
body.industry-energy-sww .linkButton {
font-family: var(--din-ot-medium);
font-size: 18px;
line-height: 24px;
font-weight: 600;
}
body.industry-energy-sww .guidePanelDescription {
font-family: var(--din-bold);
font-size: 20px;
line-height: 26px;
font-weight: 700;
}
body.industry-energy-sww .guideFieldLabel {
font-family: var(--din-bold);
font-size: 14px;
line-height: 18px;
font-weight: 700;
}
@media (max-width: 768px) {
body.industry-energy-sww .guideFieldLabel {
font-family: var(--din-regular);
font-weight: 400;
}
}
body.industry-energy-sww .guideTextDraw {
font-family: var(--din-regular);
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
@media (max-width: 768px) {
body.industry-energy-sww .guideTextDraw {
line-height: 22px;
}
}
body.industry-energy-sww .ajila_forms_radiobutton_title {
font-family: var(--din-regular);
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
@media (max-width: 768px) {
body.industry-energy-sww .ajila_forms_radiobutton_title {
line-height: 22px;
}
}
body.industry-energy-sww .sww-title {
font-family: var(--din-bold);
font-size: 20px;
line-height: 26px;
font-weight: 700;
}
body.industry-energy-sww .sww-subtitle {
margin-top: 24px;
font-family: var(--din-regular);
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
@media (max-width: 768px) {
body.industry-energy-sww .sww-subtitle {
line-height: 22px;
}
}
body.industry-energy-sww .strompreis-box {
display: inline-block;
background-color: #F5F6F7;
border-radius: 4px;
padding: 8px 12px;
font-family: Arial, Helvetica, sans-serif;
color: #1a1a1a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.industry-energy-sww .strompreis-title {
font-size: 14px;
font-weight: 400;
margin: 0 0 8px 0;
}
body.industry-energy-sww .strompreis-rate {
font-size: 18px;
font-weight: 700;
margin: 2px 0;
letter-spacing: 0.2px;
}
body.industry-energy-sww .messagebox:has(.infobox) {
background: none;
border-radius: 0;
margin: 12px 0;
padding: 0 0 0 26px;
color: var(--dark-color);
position: relative;
min-height: 14px;
}
body.industry-energy-sww .messagebox:has(.infobox)::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
background-color: #ed5f00;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M7 0A7 7 0 1 0 7 14A7 7 0 1 0 7 0ZM7.87482 3.58744C7.87482 4.02237 7.52224 4.37494 7.08731 4.37494C6.65238 4.37494 6.2998 4.02237 6.2998 3.58744C6.2998 3.15251 6.65238 2.79993 7.08731 2.79993C7.52224 2.79993 7.87482 3.15251 7.87482 3.58744ZM5.7749 5.63438C5.7749 5.32737 6.05141 5.07849 6.3925 5.07849H7.21597C7.55706 5.07849 7.83357 5.32737 7.83357 5.63438V10.8227C7.83357 11.1297 7.55706 11.3786 7.21597 11.3786C6.87488 11.3786 6.59837 11.1297 6.59837 10.8227V6.19027H6.3925C6.05141 6.19027 5.7749 5.94139 5.7749 5.63438Z'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M7 0A7 7 0 1 0 7 14A7 7 0 1 0 7 0ZM7.87482 3.58744C7.87482 4.02237 7.52224 4.37494 7.08731 4.37494C6.65238 4.37494 6.2998 4.02237 6.2998 3.58744C6.2998 3.15251 6.65238 2.79993 7.08731 2.79993C7.52224 2.79993 7.87482 3.15251 7.87482 3.58744ZM5.7749 5.63438C5.7749 5.32737 6.05141 5.07849 6.3925 5.07849H7.21597C7.55706 5.07849 7.83357 5.32737 7.83357 5.63438V10.8227C7.83357 11.1297 7.55706 11.3786 7.21597 11.3786C6.87488 11.3786 6.59837 11.1297 6.59837 10.8227V6.19027H6.3925C6.05141 6.19027 5.7749 5.94139 5.7749 5.63438Z'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
body.industry-energy-sww .messagebox:has(.infobox) p {
margin: 0;
font-family: var(--din-ot-medium);
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
@media (max-width: 768px) {
body.industry-energy-sww .messagebox:has(.infobox) p {
font-family: var(--din-regular);
font-weight: 400;
}
}
body.industry-energy-sww .forms-navigator .stepped:not(.active) .progress-stepper-item-circle::after {
content: url("standard-theme/assets/tenant/sww/checkmark.svg");
}
body.industry-energy-sww .select2-container--default .select2-results__option[aria-selected="true"]::after {
content: url("standard-theme/assets/tenant/sww/checkmark.svg");
}
body.industry-energy-sww .select2-container--default .select2-results__option[aria-selected="true"] {
background-color: transparent;
color: var(--main-color);
}
body.industry-energy-sww .select2-container .selection .select2-selection .select2-selection__arrow {
content: url("standard-theme/assets/tenant/sww/icon_chevron_down.svg");
}
body.industry-energy-sww .guideFieldNode[data-disabled="true"] .select2-container .select2-selection__arrow {
content: url("standard-theme/assets/tenant/sww/icon_chevron_disabled.svg");
}
body.industry-energy-sww .confirmationMessage,
body.industry-energy-sww .ibanCreditConfirmationMessage,
body.industry-energy-sww .messagebox:has(.confirmationMessage),
body.industry-energy-sww .messagebox:has(.ibanCreditConfirmationMessage) {
display: flex !important;
flex-direction: column;
gap: 12px;
width: 100%;
margin: 40px auto 0 !important;
background: var(--accent-03) !important;
border-radius: 24px !important;
padding: 36px !important;
}
body.industry-energy-sww .confirmationMessage::before,
body.industry-energy-sww .ibanCreditConfirmationMessage::before,
body.industry-energy-sww .messagebox:has(.confirmationMessage)::before,
body.industry-energy-sww .messagebox:has(.ibanCreditConfirmationMessage)::before {
content: none !important;
}
body.industry-energy-sww .confirmationTitle {
padding-top: 60px;
}
body.industry-energy-sww .confirmationTitle h1 {
font-family: var(--din-bold);
font-size: 20px;
line-height: 26px;
font-weight: 700;
margin: 0;
text-align: center;
}
body.industry-energy-sww .confirmationMessage .confirmationMessage,
body.industry-energy-sww .ibanCreditConfirmationMessage .ibanCreditConfirmationMessage,
body.industry-energy-sww .messagebox:has(.confirmationMessage) .confirmationMessage,
body.industry-energy-sww .messagebox:has(.ibanCreditConfirmationMessage) .ibanCreditConfirmationMessage {
margin: 0 !important;
padding: 0 !important;
background: none !important;
border-radius: 0 !important;
}
body.industry-energy-sww .confirmationBox-caption {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--dark-color);
font-family: var(--din-ot-medium);
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
@media (max-width: 768px) {
body.industry-energy-sww .confirmationBox-caption {
font-family: var(--din-regular);
font-weight: 400;
}
}
body.industry-energy-sww .confirmationBox-caption::before {
content: "";
display: inline-block;
flex: 0 0 auto;
width: 16px;
height: 16px;
background: url("standard-theme/assets/tenant/industry-energy/success.svg") no-repeat center / contain;
}
body.industry-energy-sww .confirmationBox-title {
margin: 0;
font-family: var(--din-bold);
font-size: 20px;
line-height: 26px;
font-weight: 700;
}
body.industry-energy-sww .confirmationBox-body {
margin: 0;
font-family: var(--din-regular);
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
@media (max-width: 768px) {
body.industry-energy-sww .confirmationBox-body {
line-height: 22px;
}
}
body.industry-energy-sww .guidedatepicker .datepicker-calendar-icon {
background-image: none;
background-color: var(--main-color);
-webkit-mask: url("standard-theme/assets/tenant/sww/calendar.svg") no-repeat center / contain;
mask: url("standard-theme/assets/tenant/sww/calendar.svg") no-repeat center / contain;
}
body.industry-energy-sww .guidedatepicker .datepicker-calendar-icon:hover {
background-color: var(--main-hover-color);
-webkit-mask-image: url("standard-theme/assets/tenant/sww/calendar_hover.svg");
mask-image: url("standard-theme/assets/tenant/sww/calendar_hover.svg");
}
body.industry-energy-sww .guideDatePicker[data-disabled="true"] .datepicker-calendar-icon {
background-image: none;
background-color: var(--disabled-text);
-webkit-mask: url("standard-theme/assets/tenant/sww/calendar.svg") no-repeat center / contain;
mask: url("standard-theme/assets/tenant/sww/calendar.svg") no-repeat center / contain;
}
body.industry-energy-sww .repeatable-element {
background-color: transparent;
padding: 1px 0;
margin-top: 0;
margin-bottom: 0;
}
body.industry-energy-sww .repeatable-remove button {
justify-content: flex-end;
padding-right: 0;
top: 8px;
}
body.industry-energy-sww .repeatable-add button {
color: var(--main-color);
text-align: left;
}
body.industry-energy-sww .repeatable-add button:hover {
border-color: var(--main-color);
}
body.industry-energy-sww .repeatable-remove button .iconButton-icon::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: var(--error-color);
-webkit-mask: url("standard-theme/assets/tenant/industry-energy/trash-2.svg") no-repeat center / contain;
mask: url("standard-theme/assets/tenant/industry-energy/trash-2.svg") no-repeat center / contain;
}
body.industry-energy-sww .repeatable-remove button:hover .iconButton-icon::before {
filter: none;
background-color: #5c0000;
}
body.industry-energy-sww #summaryOutput h3 {
margin-top: 32px !important;
margin-bottom: 10px !important;
}
body.industry-energy-sww .step-level .row h3 {
font-size: 18px;
line-height: 24px;
color: var(--dark-color);
}
body.industry-energy-sww .step-level .row .field-label {
font-size: 14px;
line-height: 18px;
color: var(--support-text);
}
body.industry-energy-sww #summaryOutput h3 + .row.item,
body.industry-energy-sww #summaryOutput h3 + .panel-level--2,
body.industry-energy-sww #summaryOutput h3 + .panel-level--3 {
margin-top: 8px;
}
body.industry-energy-sww #summaryOutput .step-label + .row h3 {
margin-top: 8px !important;
}
body.industry-energy-sww #summaryOutput .row.item {
margin-bottom: 12px;
}
body.industry-energy-sww #summaryOutput .col-md-8,
body.industry-energy-sww #summaryOutput .col-md-4 {
width: 50%;
}
@media (max-width: 767px) {
body.industry-energy-sww #summaryOutput .col-md-8,
body.industry-energy-sww #summaryOutput .col-md-4 {
width: 100% !important;
}
}
@media (max-width: 991px) {
body.industry-energy-sww .row:has(> [class*="col-"] > .guidefield > .sww-col-narrow):has(> [class*="col-"] > .guidefield > .sww-col-wide) {
display: flex !important;
flex-wrap: wrap;
gap: 16px;
/* Bootstrap's clearfix (content:" "; display:table) on .row::before/
::after was meant for the old float-based grid; once the row
becomes a flex container those pseudo-elements turn into extra
(invisible but width-bearing) flex items, each still eating one
"gap" of space — one before the narrow/wide pair and one after,
narrowing the wide field and adding phantom empty space at both
row edges. Same fix already applied to the Strompreis row below. */
}
body.industry-energy-sww .row:has(> [class*="col-"] > .guidefield > .sww-col-narrow):has(> [class*="col-"] > .guidefield > .sww-col-wide)::before,
body.industry-energy-sww .row:has(> [class*="col-"] > .guidefield > .sww-col-narrow):has(> [class*="col-"] > .guidefield > .sww-col-wide)::after {
content: none !important;
display: none !important;
}
body.industry-energy-sww .row:has(> [class*="col-"] > .guidefield > .sww-col-narrow):has(> [class*="col-"] > .guidefield > .sww-col-wide) > [class*="col-"] {
float: none !important;
width: auto !important;
margin-bottom: 0 !important;
}
body.industry-energy-sww .row:has(> [class*="col-"] > .guidefield > .sww-col-narrow):has(> [class*="col-"] > .guidefield > .sww-col-wide) > [class*="col-"]:has(> .guidefield > .sww-col-narrow) {
flex: 0 1 96px;
min-width: 72px;
}
body.industry-energy-sww .row:has(> [class*="col-"] > .guidefield > .sww-col-narrow):has(> [class*="col-"] > .guidefield > .sww-col-wide) > [class*="col-"]:has(> .guidefield > .sww-col-wide) {
flex: 1 1 200px;
}
}
@media (max-width: 768px) {
body.industry-energy-sww .guidetoolbar {
display: flex;
flex-direction: column-reverse;
gap: 16px;
/* The flex gap only spaces buttons apart from each other, not the
toolbar from its neighbours - on a step with a single button
(no previtemnav) there's no second gap to fall back on at all, so
without this the button sits flush against whatever field/link
precedes it and flush against the footer divider that follows. */
margin: 32px 0;
}
body.industry-energy-sww .afToolbarButton {
/* The standard field-wrapper spacing (.guidefield's own top/bottom
margin, meant to separate stacked form fields) still applies here
since each button is itself a "field" — on top of the 12px flex
gap above, that doubles up the space between the two buttons. */
}
body.industry-energy-sww .afToolbarButton .guidefield {
margin: 0;
}
body.industry-energy-sww .afToolbarButton .nextitemnav,
body.industry-energy-sww .afToolbarButton .submit,
body.industry-energy-sww .afToolbarButton .previtemnav {
float: none;
width: 100%;
/* project.less's ".afToolbarButton button { margin-top: 40px }" is
sized for the desktop float layout (space above the row); the
12px gap above already spaces the two stacked buttons apart, so
this desktop margin (plus the button's own 5px margin-bottom)
just adds more on top of that. */
}
body.industry-energy-sww .afToolbarButton .nextitemnav button,
body.industry-energy-sww .afToolbarButton .submit button,
body.industry-energy-sww .afToolbarButton .previtemnav button,
body.industry-energy-sww .afToolbarButton .nextitemnav .linkButton,
body.industry-energy-sww .afToolbarButton .submit .linkButton,
body.industry-energy-sww .afToolbarButton .previtemnav .linkButton {
width: 100%;
margin: 0;
}
}
@media only screen and (max-width: 768px) {
body.industry-energy-sww .forms-navigator .progress-stepper-item-text {
display: block !important;
}
}
body.industry-energy-sww .pnl-strompreisBerechnung,
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout,
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child::before,
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child::after {
content: none !important;
display: none !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 38px !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4 {
float: none !important;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:first-child {
flex: 1 1 180px !important;
min-width: 180px !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:nth-child(2) {
flex: 2 1 280px !important;
min-width: 260px !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:nth-child(3) {
flex: 1 1 180px !important;
min-width: 180px !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .guidefield,
body.industry-energy-sww .pnl-strompreisBerechnung .guideFieldNode,
body.industry-energy-sww .pnl-strompreisBerechnung .guideFieldWidget {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .strompreis-box {
width: 100% !important;
min-height: 72px !important;
height: auto !important;
padding: 8px 12px !important;
border-radius: 4px !important;
background: #f6f6f7 !important;
box-sizing: border-box !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .strompreis-box p {
width: auto !important;
height: auto !important;
margin: 0 0 2px 0 !important;
font-family: Urbanist-Regular-Variable, sans-serif !important;
color: #1C1F33 !important;
line-height: 18px !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .strompreis-title {
font-size: 12px !important;
margin-bottom: 6px !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .strompreis-rate,
body.industry-energy-sww .pnl-strompreisBerechnung .strompreis-rate b {
font-size: 14px !important;
line-height: 18px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .txb-Abzug .guideFieldWidget {
position: relative !important;
width: 100% !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .txb-Abzug input {
width: 100% !important;
height: 52px !important;
border-radius: 8px !important;
border: 1px solid #1C1F33 !important;
font-size: 18px !important;
padding: 13px 90px 13px 12px !important;
box-sizing: border-box !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung .txb-Abzug .guideFieldWidget::after {
content: "Rp./kWh";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-family: Urbanist-Bold, sans-serif;
font-size: 14px;
font-weight: 700;
color: #1C1F33;
white-space: nowrap;
pointer-events: none;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:nth-child(2)::before {
content: "";
position: absolute;
left: -31px;
top: 40px;
width: 24px;
height: 24px;
background: #1C1F33;
mask: url("standard-theme/assets/tenant/sww/electricityCalculationMinus.svg") center / contain no-repeat;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:nth-child(3)::before {
content: "";
position: absolute;
left: -31px;
top: 40px;
width: 24px;
height: 24px;
background: #1C1F33;
mask: url("standard-theme/assets/tenant/sww/electricityCalculationEqual.svg") center / contain no-repeat;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row::before,
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row::after {
content: none;
}
@media (max-width: 768px) {
body.industry-energy-sww {
/* Desktop positions these with an absolute "left: -31px" alongside the
row's flex layout, which only makes sense when the three cards sit
side by side. Once they stack full-width above, that offset would
place the icon off the left edge of the card instead of in the gap
above it, so reposition (rather than hide) them: static in normal
flow, centered, right where the card's own top padding used to be -
i.e. between it and the card above. */
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child {
gap: 16px !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4 {
flex: 1 1 100% !important;
min-width: 100% !important;
}
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:nth-child(2)::before,
body.industry-energy-sww .pnl-strompreisBerechnung > .gridFluidLayout > .guideLayout > .row:first-child > .col-md-4:nth-child(3)::before {
position: static !important;
left: auto !important;
top: auto !important;
display: block !important;
margin: 0 auto 8px !important;
}
}
body.industry-energy-sww .btn-vzevCheck {
display: flex;
justify-content: flex-end;
}
body.industry-energy-sww .txb-vzevHidden {
display: none !important;
}
body.industry-energy-sww .pnl-vzevResults {
width: 100%;
max-width: none;
margin-top: 16px;
}
body.industry-energy-sww .pnl-vzevResults > .gridFluidLayout > .guideLayout > .row::before,
body.industry-energy-sww .pnl-vzevResults > .gridFluidLayout > .guideLayout > .row::after {
content: none;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem {
margin: 0 0 12px 0;
/* Margin reset matters for the vertical alignment, not just the spacing:
align-items: center centers the flex item's *margin* box, so the
column's inherited bottom margin would push the 20px checkbox above
the row's optical centre while the text column stays centred. */
/* Collapse the grid cell of a hidden helper field so it takes no width in
the flex row. Direct children only — a column holding a visible sibling
(txt-vzevAddressLine) must survive. */
/* top:50%/translateY centers the checkbox within its 20px ancestor
box regardless of the box model - "top: 0" alone left it pinned to
the ancestor's top edge, so the faux box's own 1px border
(content-box by default, so it adds to rather than eats into the
20px) pushed the visible box a little below the row's true
vertical center instead of sitting on it. */
/* !important on position/top/transform is required here (unlike most
of this file's overrides, which don't need it): the base checkbox
widget centers this box in its 20px-tall label via its own
"top: 10px; transform: translateY(-10px)" (common.css) - a
same-specificity-tier declaration that, being written after ours
in source order, otherwise wins outright, so our top/transform
were silently never applied - confirmed live via getComputedStyle
(kept reporting the base rule's values, not ours) even though a
plain selector-specificity read said we should already win. */
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem > .gridFluidLayout > .guideLayout > .row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin: 0 !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem > .gridFluidLayout > .guideLayout > .row > [class*="col-"] {
padding: 0 !important;
margin: 0 !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem > .gridFluidLayout > .guideLayout > .row > [class*="col-"]:has(> .txb-vzevHidden) {
display: none !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guidefield,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideFieldNode,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideCheckBoxGroup,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideCheckBoxGroupItems,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideCheckBoxItem,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideFieldWidget {
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 input[type="checkbox"] {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
width: 20px !important;
height: 20px !important;
opacity: 0;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 {
align-self: center !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guidefield,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideFieldNode,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideCheckBoxGroup,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideCheckBoxGroupItems,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideFieldWidget,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .guideCheckBoxItem {
position: relative !important;
width: 20px !important;
height: 20px !important;
display: block !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .forms-checkbox_faux {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
box-sizing: border-box;
width: 20px;
height: 20px;
border: 1px solid #ED5F00;
border-radius: 4px;
background: #fff;
display: block;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 input[type="checkbox"]:checked + .forms-checkbox__label .forms-checkbox_faux,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 input[type="checkbox"]:checked ~ .forms-checkbox__label .forms-checkbox_faux,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .forms-checkbox-item.selected .forms-checkbox_faux {
background: #ED5F00;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 input[type="checkbox"]:checked + .forms-checkbox__label .forms-checkbox_faux::after,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 input[type="checkbox"]:checked ~ .forms-checkbox__label .forms-checkbox_faux::after,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-1 .forms-checkbox-item.selected .forms-checkbox_faux::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-11 {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
display: flex !important;
align-items: center !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-11 .guidefield,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-11 .guideFieldNode,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .col-md-11 .guideTextDraw {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
min-height: 24px;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem > .gridFluidLayout > .guideLayout > .row::before,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem > .gridFluidLayout > .guideLayout > .row::after {
content: none;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem > .gridFluidLayout > .guideLayout > .row:not(:first-child) {
display: none !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .txt-vzevAddressLine,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .txt-vzevAddressLine p {
margin: 0;
padding: 0;
line-height: 24px;
color: var(--dark-color);
font-family: var(--default-font);
font-size: var(--text-font-size-normal);
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guidecheckbox,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guideCheckBoxGroup,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guideCheckBoxItem,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .XfaCheckBox,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guidecheckbox *,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guideCheckBoxGroup *,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guideCheckBoxItem *,
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .XfaCheckBox * {
pointer-events: auto !important;
}
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guidecheckbox input[type="checkbox"],
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .guideCheckBoxGroup input[type="checkbox"],
body.industry-energy-sww .pnl-vzevResults .pnl-vzevAddressItem .XfaCheckBox input[type="checkbox"] {
pointer-events: auto !important;
cursor: pointer;
}
body.industry-energy-sww .pnl-vzevAddressItem__checkbox {
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
gap: 4px;
height: 24px;
}
body.industry-energy-sww .pnl-vzevAddressItem__checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
border: 1px solid #ED5F00;
border-radius: 4px;
accent-color: #ED5F00;
}
body.industry-energy-sww .sww-info-box {
background-color: var(--support-03);
border-radius: 8px;
padding: 20px 24px;
margin: 16px 0;
/* Each info line is a
; the leading is the label column, the
trailing text node the value column (values populated at runtime from
the hidden helper fields via replacePlaceholders). */
/* .font-supporting-text() loads DIN-OT-Medium (600); above 768px the value
text is meant to look bold, which requires actually switching to the
DIN-Bold face (not just raising font-weight on the Medium face, which
the browser would only fake by synthesizing/stretching it). The label
(p b) is reset back to the Medium face so it doesn't inherit the bold
one. Below 768px .font-supporting-text() already switches everything to
DIN-Regular/400, where both columns are meant to look the same, so no
override is needed there. */
}
body.industry-energy-sww .sww-info-box .sww-info-box__label {
margin: 0 0 8px 0;
color: var(--support-text);
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
body.industry-energy-sww .sww-info-box p {
display: flex;
gap: 8px;
margin: 0 0 4px 0;
color: var(--main-text);
font-family: var(--din-ot-medium);
font-size: 14px;
line-height: 18px;
font-weight: 600;
font-weight: 700;
}
@media (max-width: 768px) {
body.industry-energy-sww .sww-info-box p {
font-family: var(--din-regular);
font-weight: 400;
}
}
@media (min-width: 769px) {
body.industry-energy-sww .sww-info-box p {
font-family: var(--din-bold);
}
}
body.industry-energy-sww .sww-info-box p b {
flex: 0 0 40%;
font-weight: 400;
color: var(--main-text);
}
@media (min-width: 769px) {
body.industry-energy-sww .sww-info-box p b {
font-family: var(--din-ot-medium);
}
}
body.industry-energy-sww .sww-info-box p.sww-info-box__cont::before {
content: "";
flex: 0 0 40%;
}
@media (max-width: 768px) {
body.industry-energy-sww .sww-info-box p {
flex-direction: column;
gap: 0;
margin-bottom: 8px;
}
body.industry-energy-sww .sww-info-box p b {
flex-basis: auto;
}
body.industry-energy-sww .sww-info-box p.sww-info-box__cont::before {
display: none;
}
}
body.industry-energy-sww .widget_ajila_forms_fileupload .guideFieldError {
margin-top: 4px;
color: var(--error-color);
font-family: var(--din-ot-medium);
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
@media (max-width: 768px) {
body.industry-energy-sww .widget_ajila_forms_fileupload .guideFieldError {
font-family: var(--din-regular);
font-weight: 400;
}
}
body.industry-energy-sww .btn-auth-confirm {
display: flex;
justify-content: center;
margin-top: 24px;
}
body.industry-energy-sww .sww-receipt-hint {
margin-top: 24px;
}
body.industry-energy-sww .sww-download {
margin-top: 16px;
}
body.industry-energy-sww .sww-download a.sww-download-link {
display: inline-block;
padding: 12px 24px;
border: 1px solid #ed5f00;
border-radius: 4px;
color: #ed5f00;
text-decoration: none;
}
body.industry-energy-sww .sww-download a.sww-download-link:hover,
body.industry-energy-sww .sww-download a.sww-download-link:focus {
background-color: #ed5f00;
color: #ffffff;
}