.tx-tariffwizard-wizard {
    /*max-width: 640px;*/
}

/* Restores what the `hidden` attribute is supposed to do. Every step module
   in this extension shows and hides blocks by setting `hidden` - scenario
   sections, the HT/NT pair, the Heizstrom question, the review step's
   sections - and the attribute only works through a UA rule of
   `display: none`, which ANY author `display` in this file outranks. Without
   this guard a layout rule added three hundred lines further down silently
   un-hides something at the top. It happened on 2026-09-14 with the refine
   form's heating block.

   `!important` is the point here rather than a shortcut: the rule has to beat
   the layout declarations, and `hidden` means hidden. */
.tx-tariffwizard-wizard [hidden] {
    display: none !important;
}

.tx-tariffwizard-step fieldset {
    margin-bottom: 1.5em;
}

.tx-tariffwizard-field {
    margin-bottom: 0.75em;
}

/* Checkboxes and radios are excluded: the full-width text-field look (100%
   width, border, padding) turns the box into a wide rectangle detached from
   its label - and a 100% wide radio pushes the label text onto a line of its
   own (seen 2026-09-21 on the entry step's Heizstrom question). */
.tx-tariffwizard-field input:not([type="checkbox"]):not([type="radio"]),
.tx-tariffwizard-field select {
    background-color: transparent;
    border: 1px solid #575757;
    width: 100%;
    padding: 7.5px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* The label belongs above its field with a gap, and `display: block` is what
   puts it there: the theme's labels are inline, and a `margin-bottom` on an
   inline box does nothing vertically - measured 2026-09-21, every
   label/field pair in the entry step ("Ihre Postleitzahl",
   "Jahresverbrauch (kWh)", "Ihr Verwendungszweck") sat at a 0px gap with
   this margin already declared. */
.tx-tariffwizard-field label {
    display: block;
    margin-bottom: 0.4em;
}

/* Checkbox and radio fields wrap the input inside the label instead of
   placing a label before it (there is no placeholder-text equivalent for
   either), so the block rule above would drop the text below its own box.
   These stay on one line, input first. */
.tx-tariffwizard-field label:has(input[type="checkbox"]),
.tx-tariffwizard-field label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.tx-tariffwizard-error {
    color: #b00020;
}

/* The theme zeroes every heading margin, so a step heading would otherwise
   sit flush on the block under it (measured 2026-09-21: 0px between
   "Tarifcheck für Privatkunden" and the Strom/Erdgas tabs). */
.tx-tariffwizard-step h2 {
    margin-top: 0;
    margin-bottom: 1.25em;
}

/* Entry step */

.tx-tariffwizard-step-entry {
    max-width: 640px;
    padding: 1.5em;
    border-radius: 12px;
    background: #fff;
}

.tx-tariffwizard-category-tabs {
    display: flex;
    margin-bottom: 1em;
}

.tx-tariffwizard-category-tab {
    flex: 1;
    padding: 0.6em 1em;
    border: 1px solid #bbb;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
}

.tx-tariffwizard-category-tab-active {
    background: #e2001a;
    color: #fff;
    border-color: #e2001a;
}

.tx-tariffwizard-consumption-presets {
    display: flex;
    gap: 0.5em;
    list-style: none;
    margin: 0.5em 0 0;
    padding: 0;
}

.tx-tariffwizard-consumption-presets img {
    width: 47px;
    height: 48px;
}

.tx-tariffwizard-consultation-hint {
    color: #e2001a;
}

.tx-tariffwizard-reveal-details {
    display: inline-block;
    margin-bottom: 1em;
    color: #e2001a;
}

/* The blocks only some Verwendungszwecke add - the HT/NT pair of a
   Zweitarifmessung and the Heizstrom question - open below the select and
   need room of their own; unstyled they butt straight against the field
   above. The tariff step's refine form already spaces its own copies of
   these (see the .tx-tariffwizard-step-tariff rules further down); this is
   the same spacing for the entry step. */
.tx-tariffwizard-step-entry .tx-tariffwizard-usage-purpose-description {
    margin-top: 0.4em;
}

.tx-tariffwizard-step-entry [data-dual-rate-fields],
.tx-tariffwizard-step-entry .tx-tariffwizard-heating-metering {
    margin-top: 1em;
}

.tx-tariffwizard-step-entry .tx-tariffwizard-heating-metering legend {
    margin-bottom: 0.4em;
}

/* One option per line: `flex` rather than the `inline-flex` the radio rule
   above gives them, which would run all three into a single row. The
   `:has()` is what carries the selector past that rule's specificity. */
.tx-tariffwizard-step-entry .tx-tariffwizard-heating-metering label:has(input[type="radio"]) {
    display: flex;
    margin: 0.25em 0;
}

.tx-tariffwizard-step-entry button[data-role='submit'] {
    background: #e2001a;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.75em 2em;
    cursor: pointer;
}

/* Offer tiles ("Kacheln") */

/* A grid rather than flex percentages: the tiles have to be equally tall
   (both designs show flush bottom edges and a call to action on one line),
   and only a grid gives every item in a row the row's height for free.

   Two bounds, and both are needed:
   - **At most three columns**, which is what the design shows - a fourth
     tariff starts a new row rather than squeezing the row. That is the
     `(100% - 2 * gap) / 3` half of the floor.
   - **At least 280px**, below which the price rows (label, amount, unit)
     start to wrap. This is what takes over on a narrow container and drops
     the row to two columns and then to one - including in the backend
     preview, which renders the same cards into a much narrower module.
   `auto-fill`, not `auto-fit`: a tile is a third of the row whatever the
   offer count. `auto-fit` collapses the tracks no tile landed in, so two
   tariffs share the row at half the width each - far wider than the tile the
   design shows. `auto-fill` keeps the empty third track and the two tiles
   keep their third-of-a-row width. (The earlier objection to `auto-fill` -
   an empty fourth track beside three tiles - came from the plain
   `minmax(280px, 1fr)` floor; with the `(100% - 2 * gap) / 3` floor above a
   fourth track cannot fit at any container width.) */
.tx-tariffwizard-offer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(280px, (100% - 2em) / 3), 1fr));
    gap: 1em;
    align-items: stretch;
}

/* "Weitere Informationen" on the offer tile: Vertragslaufzeit,
   Kündigungsfrist, Preisstand — secondary to the price, so visually quiet
   and, as in both designs, behind the disclosure row above it. Shares the
   price table's rules; only the spacing and the smaller type are its own. */
.tx-tariffwizard-offer-info {
    margin: 0.75em 0 0;
    font-size: 0.85em;
}

.tx-tariffwizard-offer-info-label {
    color: #666;
}

/* The value column takes what the label leaves and keeps its own left edge,
   so the three values line up with each other rather than each starting
   after its own label. */
.tx-tariffwizard-offer-info-value {
    width: 100%;
    padding: 2px 0 2px 10px;
}

/* The Vertragsbedingungen row: the label itself is the link, so the row
   spans both columns instead of being a label/value pair. CI red, the colour
   the Bestellinformationen panel gives its document links - the tile's host
   page does not style links inside the plugin. */
.tx-tariffwizard-offer-info-document {
    padding: 2px 0;
}

.tx-tariffwizard-offer-info-document a {
    color: #e2001a;
}

.tx-tariffwizard-offer {
    position: relative;
    /* Column layout so `margin-top: auto` on the call to action pushes it to
       the bottom edge whatever the tile above it contains - the tiles differ
       by an image, a bonus row or a "Vorteile" block and must still line up. */
    display: flex;
    flex-direction: column;
    /* One accent colour per tile, used by the border, the Extrastörer bar
       and the "recommended" glow alike. A tile with an Extrastörer switches
       all of them to its colour (see .tx-tariffwizard-offer-accent-*): a
       child cannot paint over its parent's own border - overflow clips to
       the padding box - so a green bar inside a red-bordered tile always
       leaves a red hairline above and beside it, and border-radius blends
       the corners between the two colours on top of that. */
    --tw-offer-accent: #e2001a;
    --tw-offer-glow: rgba(226, 0, 26, .25);
    border: 1px solid var(--tw-offer-accent);
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1em;
    /* The Extrastörer bar sits flush in the rounded top corners, so anything
       painting outside them has to be clipped. */
    overflow: hidden;
}

.tx-tariffwizard-offer-accent-red {
    --tw-offer-accent: #e2001a;
    --tw-offer-glow: rgba(226, 0, 26, .25);
}

.tx-tariffwizard-offer-accent-green {
    --tw-offer-accent: #4caf50;
    --tw-offer-glow: rgba(76, 175, 80, .25);
}

.tx-tariffwizard-offer-accent-yellow {
    --tw-offer-accent: #ffcc00;
    --tw-offer-glow: rgba(255, 204, 0, .35);
}

.tx-tariffwizard-offer-accent-orange {
    --tw-offer-accent: #ee7f00;
    --tw-offer-glow: rgba(238, 127, 0, .25);
}

.tx-tariffwizard-offer-accent-blue {
    --tw-offer-accent: #0069b4;
    --tw-offer-glow: rgba(0, 105, 180, .25);
}

/* "Hervorheben" (Tariff::$recommended): the tile's own accent colour, just
   heavier plus a soft glow - a recommended tile has to stand out against its
   neighbours without introducing a second border colour. Following the
   accent matters now that an Extrastörer can change it: a green-framed tile
   with a red glow would look like a rendering fault. */
.tx-tariffwizard-offer-recommended {
    border-width: 3px;
    box-shadow: 0 2px 8px var(--tw-offer-glow);
}

/* The Extrastörer runs as a full-width bar across the top of the tile
   (Marc, 2026-09-14) rather than as the corner pill it was. Negative margins
   pull it back out of the tile's own 1em padding so it reaches both edges;
   the tile clips it into the rounded corners. */
.tx-tariffwizard-offer-badges {
    display: flex;
    margin: -1em -1em 1em;
}

.tx-tariffwizard-badge {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.6em;
    font-size: 0.8em;
    font-weight: 600;
    text-align: center;
    color: #fff;
}

.tx-tariffwizard-badge-red {
    background: #e2001a;
}

.tx-tariffwizard-badge-green {
    background: #4caf50;
}

/* Yellow/orange/blue are the Fairenergie CI values (see h_grid's rte.css:
   .gelb/.orange/.blau). Yellow overrides the badge's white text - white on
   #ffcc00 is unreadable. */
.tx-tariffwizard-badge-yellow {
    background: #ffcc00;
    color: #1a1a1a;
}

.tx-tariffwizard-badge-orange {
    background: #ee7f00;
}

.tx-tariffwizard-badge-blue {
    background: #0069b4;
}

.tx-tariffwizard-offer-title {
    display: block;
    margin-bottom: 0.2em;
    font-size: 1.15em;
}

/* Reserved space for a row this tariff does not have: the Extrastörer bar
   and the boni the other tiles in the same row carry (Marc, 2026-09-21).
   `visibility: hidden` keeps the height and drops the element from the
   accessibility tree, which an opacity of 0 would not. */
.tx-tariffwizard-offer-badges-reserved,
.tx-tariffwizard-offer-row-reserved {
    visibility: hidden;
}

.tx-tariffwizard-offer-monthly-price {
    margin: 0.1em 0 0.8em;
    font-size: 1.4em;
    font-weight: bold;
}

/* The ⓘ disclosure's target, under the price it belongs to. */
.tx-tariffwizard-offer-footnote {
    margin: -0.6em 0 0.8em;
    font-size: 0.85em;
    color: #575757;
}

.tx-tariffwizard-offer-footnote p {
    margin: 0;
}

/* The price block. Both designs align the amounts on their right edge with
   the unit beside them, which is why this is a table and not a paragraph:
   the label column sets its own width, the amount column is the one that has
   to line up between rows. */
.tx-tariffwizard-offer-prices {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.8em;
}

.tx-tariffwizard-offer-prices th {
    padding: 2px 0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.tx-tariffwizard-offer-amount {
    padding: 2px 0 2px 10px;
    text-align: right;
    white-space: nowrap;
}

.tx-tariffwizard-offer-unit {
    width: 100%;
    padding: 2px 0 2px 6px;
    color: #575757;
    font-size: 0.9em;
}

/* Boni keep the red they had as a list - it is what makes them readable as
   the tile's deal rather than as two more price rows. */
.tx-tariffwizard-offer-bonus th,
.tx-tariffwizard-offer-bonus .tx-tariffwizard-offer-amount {
    color: #e2001a;
    font-weight: bold;
}

.tx-tariffwizard-offer-bonus .tx-tariffwizard-offer-unit {
    color: #e2001a;
}

/* The chosen BioGas option on gas tiles (FAIRENERGCR-490), legacy's
   "mit BioGas 10 %" box with the CO₂ saving. */
.tx-tariffwizard-offer-biogas {
    margin-bottom: 0.8em;
    padding: 0.5em 0.6em 0;
    border-left: 3px solid #8bb31d;
    background: #f4f8e8;
}

.tx-tariffwizard-offer-biogas-name {
    margin: 0 0 0.2em;
    font-weight: bold;
}

.tx-tariffwizard-offer-biogas .tx-tariffwizard-offer-prices {
    margin-bottom: 0.5em;
}

/* Full-bleed image band: the negative margins pull it out of the tile's own
   1em padding, the tile's `overflow: hidden` clips it into the rounded
   corners - the same trick the Extrastörer bar uses. A fixed height keeps
   tiles comparable when editors upload images of different proportions. */
.tx-tariffwizard-offer-image {
    width: calc(100% + 2em);
    height: 120px;
    margin: 0 -1em 0.8em;
    object-fit: cover;
}

/* The grey section bands: "Vorteile:" and the "Weitere Informationen"
   disclosure. Both designs set these as full-width grey bars, which is also
   what separates the tile's three parts without drawing more lines. */
.tx-tariffwizard-offer-band {
    display: block;
    box-sizing: border-box;
    width: calc(100% + 2em);
    margin: 0 -1em;
    padding: 8px 1em;
    background-color: #eeeef0;
    border: 0;
    color: #575757;
    font-size: 0.8em;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* The disclosure is a button, so it also needs the chevron the design draws
   at its right, and a pointer. It rotates when open, the way a disclosure
   should say which way it goes. */
.tx-tariffwizard-offer-more {
    position: relative;
    margin-top: 28px;
    cursor: pointer;
}

/* The block above the disclosure brings its own bottom margin, which would
   stack on top of those 28px (flex items do not collapse margins) - the gap
   measured 12px after the advantages list but 27px after the price table.
   Dropped here so the distance is the same whatever the tile happens to end
   on. */
.tx-tariffwizard-offer-prices:has(+ .tx-tariffwizard-offer-more),
.tx-tariffwizard-offer-advantages:has(+ .tx-tariffwizard-offer-more) {
    margin-bottom: 0;
}

.tx-tariffwizard-offer-more::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 2px solid #858688;
    border-bottom: 2px solid #858688;
    transform: rotate(-45deg);
}

.tx-tariffwizard-offer-more[aria-expanded="true"]::after {
    margin-top: -1px;
    transform: rotate(-135deg);
}

/* More white space around and between the advantages (FAIRENERGCR-470,
   "Vorteile mit mehr Weißraum"): the list sits a little further from the
   band and each bullet gets its own breathing room. */
.tx-tariffwizard-offer-advantages {
    margin: 1.1em 0 0.4em;
    padding: 0 0.4em;
}

.tx-tariffwizard-offer-advantages ul {
    margin: 0;
    padding-left: 1.3em;
    line-height: 1.45;
}

.tx-tariffwizard-offer-advantages li + li {
    margin-top: 0.5em;
}

/* No price to print, so the note takes the price block's place - see
   offer-card-renderer.js on why a dynamically priced tariff reaches a tile
   at all. */
.tx-tariffwizard-offer-dynamic-price {
    margin: 0 0 0.8em;
    color: #575757;
}

/* The ⓘ footnote popover. It lives at the end of <body> and renders in the
   top layer, so it is deliberately NOT scoped under .tx-tariffwizard-wizard
   and it cannot be clipped by the offer tile's `overflow: hidden` - which is
   the whole reason for using the popover API here (see
   services/footnote-popover.js). Its position is set inline by that script;
   `inset: auto` and `margin: 0` are what allow that, since the UA stylesheet
   centres a popover in the viewport by default. */
.tx-tariffwizard-footnote-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    max-width: min(320px, calc(100vw - 16px));
    padding: 10px 12px;
    border: 1px solid #d5d5d7;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    color: #242424;
    font-size: 0.85em;
    line-height: 1.4;
}

.tx-tariffwizard-footnote-popover p {
    margin: 0;
}

.tx-tariffwizard-footnote-popover p + p {
    margin-top: 0.5em;
}

/* ==========================================================================
   Bestellstrecke (checkout steps)

   Translated from the legacy Onlineantrag rules in
   h_grid/Resources/Public/Css/layout.css, which are scoped to
   `.tx-z-onlineantraege` and therefore never match the wizard. They are
   re-scoped here instead of being widened over there: h_grid's TypoScript is
   imported by four site themes (fairenergie, swr, baeder, swrkarriere), so a
   wizard selector added to that file would ship to all of them (RISK R-F5).

   The wizard keeps its own `<label>` + `<input>` markup - the legacy
   `.antrag-input`/`.feldname` shape is deliberately not copied - so the legacy
   geometry (right-aligned 35% label beside a 53% field, layout.css:3630/3142)
   is rebuilt with flex rather than legacy's floats.
   ========================================================================== */

.tx-tariffwizard-step-customer-address,
.tx-tariffwizard-step-customer-bank,
.tx-tariffwizard-step-solar-sponsorship,
.tx-tariffwizard-step-biogas {
    color: #242424;
}

/* Legacy puts each section behind a grey, centred, uppercase bar
   (`.csc-default.layout-antrag` + `h3.text-align-center.uppercase`,
   layout.css:3706/3433). The wizard's equivalent element is the fieldset's own
   <legend>, so the bar is built from that - no partial has to change. The
   fieldset border has to go first, otherwise the legend sits inside it. */
.tx-tariffwizard-step-customer-address fieldset,
.tx-tariffwizard-step-customer-bank fieldset,
.tx-tariffwizard-step-solar-sponsorship fieldset,
.tx-tariffwizard-step-biogas fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
    min-width: 0;
}

/* The scenario blocks are fieldsets (rather than divs) only so the two
   scenarios the customer did not pick can be `disabled` and their required
   fields leave the constraint-validation set - see
   customer-bank-step.js::updateScenarioVisibility(). They are not a visual
   section and carry no legend, so the 20px the rule above gives every
   fieldset is taken back here to keep the step rendering as before. */
.tx-tariffwizard-step-customer-bank fieldset[data-scenario-section] {
    margin-bottom: 0;
}

.tx-tariffwizard-step-customer-address legend,
.tx-tariffwizard-step-customer-bank legend,
.tx-tariffwizard-step-solar-sponsorship legend,
.tx-tariffwizard-step-biogas legend {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background-color: #eeeef0;
    color: #242424;
    padding: 12px 20px;
    margin: 20px 0;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
}

/* Field row: label left of the input, both on one baseline. Checkbox fields
   are excluded - there the <label> wraps the input (see the note further up),
   so the two-column geometry would tear them apart. */
.tx-tariffwizard-step-customer-address .tx-tariffwizard-field:not(:has(input[type="checkbox"])),
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field:not(:has(input[type="checkbox"])),
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field:not(:has(input[type="checkbox"])),
.tx-tariffwizard-step-biogas .tx-tariffwizard-field:not(:has(input[type="checkbox"])) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0;
}

.tx-tariffwizard-step-customer-address .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
.tx-tariffwizard-step-biogas .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])) {
    flex: 0 0 35%;
    padding: 12px 10px 0;
    margin: 10px 0 0;
    text-align: right;
}

/* Legacy marks required fields with an explicit <span class="mandatory">*</span>
   in the template; the wizard carries the same information on the input as
   `required`, so the marker is derived from it instead of duplicated. */
/* Checkbox rows have no separate label column - the <label> wraps the input -
   so they are lined up with the field column instead of the label column. */
.tx-tariffwizard-step-customer-address .tx-tariffwizard-field:has(> label > input[type="checkbox"]),
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field:has(> label > input[type="checkbox"]),
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field:has(> label > input[type="checkbox"]),
.tx-tariffwizard-step-biogas .tx-tariffwizard-field:has(> label > input[type="checkbox"]) {
    margin: 10px 0 0 35%;
}

.tx-tariffwizard-step-customer-address .tx-tariffwizard-field:has(> input[required], > select[required]) > label::after,
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field:has(> input[required], > select[required]) > label::after,
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field:has(> input[required], > select[required]) > label::after,
.tx-tariffwizard-step-biogas .tx-tariffwizard-field:has(> input[required], > select[required]) > label::after {
    content: " *";
}

.tx-tariffwizard-step-customer-address .tx-tariffwizard-field > input,
.tx-tariffwizard-step-customer-address .tx-tariffwizard-field > select,
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > input,
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > select,
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > input,
.tx-tariffwizard-step-biogas .tx-tariffwizard-field > input,
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > select,
.tx-tariffwizard-step-biogas .tx-tariffwizard-field > select {
    flex: 0 0 53%;
    width: 53%;
    margin-top: 10px;
}

/* Feedback/error paragraphs inside a field row (e.g. the IBAN check) belong
   under the input, not beside the label. */
.tx-tariffwizard-step-customer-address .tx-tariffwizard-field > p,
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > p,
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > p,
.tx-tariffwizard-step-biogas .tx-tariffwizard-field > p {
    flex: 0 0 53%;
    margin: 0.25em 0 0 35%;
}

/* Native select arrow replaced by the legacy chevron (layout.css:3156). */
.tx-tariffwizard-step-customer-address .tx-tariffwizard-field > select,
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > select,
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > select,
.tx-tariffwizard-step-biogas .tx-tariffwizard-field > select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='20' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23575757'/></g></svg>") no-repeat;
    background-position: right .7em top 50%, 0 0;
}

.tx-tariffwizard-step-customer-address .tx-tariffwizard-field > select::-ms-expand,
.tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > select::-ms-expand,
.tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > select::-ms-expand,
.tx-tariffwizard-step-biogas .tx-tariffwizard-field > select::-ms-expand {
    display: none;
}

/* Step navigation: legacy's `.weiter` (layout.css:3726) is a red bar floated
   right with a chevron drawn from two borders. Its `.zurueck` counterpart only
   ever got `float: left` in the red colour scheme - no size and no background,
   although its white chevron implies one was intended - so the back button is
   given the same geometry in the neutral grey already used elsewhere in
   layout.css rather than porting that gap. */
.tx-tariffwizard-step-customer-address form > button,
.tx-tariffwizard-step-customer-bank form > button,
.tx-tariffwizard-step-solar-sponsorship form > button,
.tx-tariffwizard-step-biogas form > button {
    position: relative;
    width: 31%;
    min-width: 314px;
    height: 47px;
    margin: 20px 0 10px;
    border: none;
    color: #fff;
    cursor: pointer;
}

.tx-tariffwizard-step-customer-address form > button[type="submit"],
.tx-tariffwizard-step-customer-bank form > button[type="submit"],
.tx-tariffwizard-step-solar-sponsorship form > button[type="submit"],
.tx-tariffwizard-step-biogas form > button[type="submit"] {
    float: right;
    background-color: #e2001a;
    text-align: right;
    padding-right: 30px;
}

.tx-tariffwizard-step-customer-address form > button[data-action="back"],
.tx-tariffwizard-step-customer-bank form > button[data-action="back"],
.tx-tariffwizard-step-solar-sponsorship form > button[data-action="back"],
.tx-tariffwizard-step-biogas form > button[data-action="back"] {
    float: left;
    background-color: #858688;
    text-align: left;
    padding-left: 30px;
}

.tx-tariffwizard-step-customer-address form > button::after,
.tx-tariffwizard-step-customer-bank form > button::after,
.tx-tariffwizard-step-solar-sponsorship form > button::after,
.tx-tariffwizard-step-biogas form > button::after {
    content: "";
    position: absolute;
    top: 20px;
    width: 8px;
    height: 8px;
    border: 0 solid transparent;
    transform: rotate(-45deg);
}

.tx-tariffwizard-step-customer-address form > button[type="submit"]::after,
.tx-tariffwizard-step-customer-bank form > button[type="submit"]::after,
.tx-tariffwizard-step-solar-sponsorship form > button[type="submit"]::after,
.tx-tariffwizard-step-biogas form > button[type="submit"]::after {
    right: 15px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.tx-tariffwizard-step-customer-address form > button[data-action="back"]::after,
.tx-tariffwizard-step-customer-bank form > button[data-action="back"]::after,
.tx-tariffwizard-step-solar-sponsorship form > button[data-action="back"]::after,
.tx-tariffwizard-step-biogas form > button[data-action="back"]::after {
    left: 15px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

/* The buttons are floated, so the step has to contain them. */
.tx-tariffwizard-step-customer-address form::after,
.tx-tariffwizard-step-customer-bank form::after,
.tx-tariffwizard-step-solar-sponsorship form::after,
.tx-tariffwizard-step-biogas form::after {
    content: "";
    display: block;
    clear: both;
}

/* Legacy's Antrag breakpoints live inside layout.css's own media queries
   (:4134 / :4253 / :4265): the label stacks above a wider input, and below
   550px the row gets side padding. */
@media (max-width: 767px) {
    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])) {
        flex: 0 0 100%;
        padding: 10px 0 0;
        text-align: left;
    }

    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field > input,
    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field > select,
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > input,
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > select,
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > input,
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field > input,
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > select,
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field > select {
        flex: 0 0 80%;
        width: 80%;
        padding: 10px;
    }

    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field:has(> label > input[type="checkbox"]),
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field:has(> label > input[type="checkbox"]),
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field:has(> label > input[type="checkbox"]),
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field:has(> label > input[type="checkbox"]) {
        margin-left: 0;
    }

    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field > p,
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > p,
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > p,
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field > p {
        flex: 0 0 80%;
        margin-left: 0;
    }

    .tx-tariffwizard-step-customer-address form > button,
    .tx-tariffwizard-step-customer-bank form > button,
    .tx-tariffwizard-step-solar-sponsorship form > button,
    .tx-tariffwizard-step-biogas form > button {
        font-size: 80%;
        min-width: 0;
        width: 48%;
    }
}

@media (max-width: 550px) {
    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field,
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field,
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field,
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field {
        padding: 0 20px;
    }

    .tx-tariffwizard-step-customer-address .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
    .tx-tariffwizard-step-customer-bank .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
    .tx-tariffwizard-step-solar-sponsorship .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])),
    .tx-tariffwizard-step-biogas .tx-tariffwizard-field > label:not(:has(input[type="checkbox"])) {
        padding: 0;
    }
}

/* ==========================================================================
   Bestellinformationen ("Ihre Vertragsdaten")

   Legacy renders this as its own plugin dropped into a second grid column
   next to the application form, in a Mask "Schattenbox"
   (`.mask_schattenbox-bg3` = #f0f0f0) with `.tarifberater-bestellinformation`
   inside it (layout.css:2529 / :3066). Here it is part of the wizard plugin,
   so the two-column split has to come from the plugin itself.
   ========================================================================== */

.tx-tariffwizard-wizard-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.tx-tariffwizard-wizard-layout > .tx-tariffwizard-wizard-step-container {
    flex: 1 1 auto;
    min-width: 0;
}

/* Roughly legacy's proportions on the Antrag page: the form column takes
   about three quarters of the content width, the panel the rest. */
.tx-tariffwizard-order-summary {
    flex: 0 0 26%;
    box-sizing: border-box;
    background-color: #f0f0f0;
    color: #242424;
    font-size: 16px;
    padding: 15px;
}

.tx-tariffwizard-order-summary[hidden] {
    display: none;
}

.tx-tariffwizard-order-summary h3 {
    margin-top: 0;
}

.tx-tariffwizard-summary-tariff-name {
    font-weight: bold;
}

.tx-tariffwizard-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.tx-tariffwizard-summary-table td {
    padding: 2px 0;
    vertical-align: top;
}

.tx-tariffwizard-summary-table td + td {
    text-align: right;
    white-space: nowrap;
    padding-left: 10px;
}

/* The ⓘ next to "Kosten Jahr"/"Kosten Monat". Legacy draws it from
   FontAwesome (`.info-icon:after`, content "\f05a", layout.css:410); an
   inline SVG is used instead so the icon cannot silently disappear with a
   font that this plugin does not control. */
.tx-tariffwizard-summary-footnote-toggle {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    vertical-align: -3px;
    cursor: pointer;
    background: transparent url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='%23858688' d='M8 0a8 8 0 100 16A8 8 0 008 0zm0 3.2a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zM9.6 12.4H6.4v-1.2h.8V8H6.4V6.8h2.4v4.4h.8v1.2z'/></svg>") no-repeat center / 16px 16px;
}

.tx-tariffwizard-summary-footnote td {
    text-align: left;
    white-space: normal;
    padding: 4px 0 8px;
    font-size: 0.85em;
    color: #575757;
}

.tx-tariffwizard-summary-footnote p {
    margin: 0;
}

.tx-tariffwizard-summary-documents {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
}

.tx-tariffwizard-summary-documents a {
    color: #e2001a;
}

/* Below the Antrag breakpoint the panel stops being a column and becomes a
   full-width block under the form (its DOM position) - a 26% sidebar at
   phone width is unreadable, and legacy's grid collapses the same way. */
@media (max-width: 767px) {
    .tx-tariffwizard-wizard-layout {
        display: block;
    }

    .tx-tariffwizard-order-summary {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   Review step ("Prüfen und bestellen")

   Legacy's third tab lays each summary line out as two 50% halves - a
   right-aligned `.feldname` beside an `.ausgabe` (h_grid layout.css:3934) -
   and puts a pencil next to each section heading (`.icon-bearbeiten`, :3958).
   Both are rebuilt here on the wizard's own markup, as everywhere else in
   this file.
   ========================================================================== */

.tx-tariffwizard-step-summary fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
    min-width: 0;
}

.tx-tariffwizard-step-summary legend {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background-color: #eeeef0;
    color: #242424;
    padding: 12px 20px;
    margin: 20px 0;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
}

.tx-tariffwizard-step-summary h4 {
    margin: 20px 0 10px;
    text-align: center;
}

.tx-tariffwizard-summary-row {
    display: flex;
    align-items: flex-start;
    padding: 5px 0;
}

.tx-tariffwizard-summary-label {
    flex: 0 0 50%;
    padding: 0 10px;
    text-align: right;
}

.tx-tariffwizard-summary-value {
    flex: 0 0 50%;
    padding: 0 10px;
}

/* The pencil next to a section heading. Legacy draws it from FontAwesome
   ("\f040"); an inline SVG is used for the same reason the info icon in the
   Bestellinformationen is one - this plugin does not control that font. */
.tx-tariffwizard-summary-edit {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    padding: 0;
    border: 0;
    vertical-align: -3px;
    cursor: pointer;
    background: transparent url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='%23605e5f' d='M12.1 1.3a1.1 1.1 0 011.6 0l1 1a1.1 1.1 0 010 1.6l-.9.9-2.6-2.6.9-.9zM10.3 3.1l2.6 2.6-7.1 7.1-3.3.7.7-3.3 7.1-7.1z'/></svg>") no-repeat center / 18px 18px;
}

/* The Produktinformationen and Einverständniserklärung are editor RTE copy
   and regularly contain a price table wider than a phone. The box scrolls
   sideways instead of squashing the column - the alternative, a table
   crushed to unreadable line breaks, is what it did before.

   The scrolling sits on this box, not on the table: `display: block` on the
   table (the earlier version) drops its table layout, so the editor's
   `width: 100%` only sized an outer block while the columns shrank to their
   content and ran into each other (FAIRENERGCR, 2026-10-08). */
.tx-tariffwizard-summary-richtext {
    padding: 0 10px;
    overflow-x: auto;
}

.tx-tariffwizard-summary-richtext table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

/* The RTE writes cellpadding="0"; without padding of our own the columns
   touch. Left-aligned and top-aligned like the editor shows them. One line
   per cell: on a phone a wrapped "Stufe 2: (1.201 kWh – 4.000 kWh)" broke
   into five lines, a row that scrolls sideways in the box reads better. */
.tx-tariffwizard-summary-richtext th,
.tx-tariffwizard-summary-richtext td {
    padding: 0.25em 1em 0.25em 0;
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
}

/* § 312j Abs. 3 BGB: the order button has to be unambiguous, so it is the
   one button in the wizard that never reads "Weiter". Same red bar as the
   other steps' submit, just wider - it carries a longer label. */
.tx-tariffwizard-step-summary form > button {
    position: relative;
    width: 31%;
    min-width: 314px;
    height: 47px;
    margin: 20px 0 10px;
    border: none;
    color: #fff;
    cursor: pointer;
}

.tx-tariffwizard-step-summary form > button[type="submit"] {
    float: right;
    background-color: #e2001a;
    text-align: right;
    padding-right: 30px;
}

.tx-tariffwizard-step-summary form > button[data-action="back"] {
    float: left;
    background-color: #858688;
    text-align: left;
    padding-left: 30px;
}

.tx-tariffwizard-step-summary form > button::after {
    content: "";
    position: absolute;
    top: 20px;
    width: 8px;
    height: 8px;
    border: 0 solid transparent;
    transform: rotate(-45deg);
}

.tx-tariffwizard-step-summary form > button[type="submit"]::after {
    right: 15px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.tx-tariffwizard-step-summary form > button[data-action="back"]::after {
    left: 15px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

.tx-tariffwizard-step-summary form::after {
    content: "";
    display: block;
    clear: both;
}

/* The terms checkbox sits between the declaration of consent and the order
   button, left-aligned (FAIRENERGCR-486 - it used to start at the value
   column, which read as pushed too far right). */
.tx-tariffwizard-step-summary .tx-tariffwizard-field:has(> label > input[type="checkbox"]) {
    margin: 20px 0 0;
    padding: 0 10px;
}

.tx-tariffwizard-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .tx-tariffwizard-summary-row {
        display: block;
        padding: 5px 20px;
    }

    .tx-tariffwizard-summary-label,
    .tx-tariffwizard-summary-value {
        display: block;
        padding: 0;
        text-align: left;
    }

    .tx-tariffwizard-summary-label {
        color: #575757;
    }

    .tx-tariffwizard-step-summary .tx-tariffwizard-field:has(> label > input[type="checkbox"]) {
        margin-left: 0;
        padding: 0 20px;
    }

    .tx-tariffwizard-step-summary form > button {
        font-size: 80%;
        min-width: 0;
        width: 48%;
    }
}

/* ==========================================================================
   Refine form above the offer tiles

   Same card the entry step wears, because it is the same kind of thing - the
   question that produced the tiles, kept editable in place. Its three fields
   sit in one row rather than stacked full width: a postcode field spanning
   1.300px reads as the main event, and on this step the tiles are.
   ========================================================================== */

.tx-tariffwizard-step-tariff [data-role='refine-form'] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 1.5em;
    padding: 1.25em 1.5em;
    margin-bottom: 1.5em;
    border-radius: 12px;
    background: #f0f0f0;
}

/* The three questions share one row. Flex rather than inline-block because
   the Verwendungszweck column can grow tall (it holds the Heizstrom question
   and the HT/NT pair for some purposes) and inline-block would push the
   consumption field onto a line of its own even while those are hidden. */
.tx-tariffwizard-step-tariff [data-role='refine-form'] > .tx-tariffwizard-field,
.tx-tariffwizard-step-tariff [data-usage-purpose-block] {
    flex: 1 1 220px;
    min-width: 0;
}

/* The error paragraph is always in the markup, empty or not, so it is what
   ends the field row - which leaves the button free to size itself instead of
   being stretched across the form by a 100% basis of its own. */
.tx-tariffwizard-step-tariff [data-role='refine-form'] > .tx-tariffwizard-error {
    flex: 0 0 100%;
}

.tx-tariffwizard-step-tariff [data-role='refine-form'] > button[type='submit'] {
    flex: 0 0 auto;
}

.tx-tariffwizard-step-tariff [data-role='refine-form'] > .tx-tariffwizard-error:empty {
    margin: 0;
}

.tx-tariffwizard-step-tariff [data-usage-purpose-block] > .tx-tariffwizard-field,
.tx-tariffwizard-step-tariff [data-dual-rate-fields] > .tx-tariffwizard-field {
    display: block;
    width: 100%;
    margin-right: 0;
}

/* The dual-rate HT/NT pair and the Heizstrom question only appear for some
   Verwendungszwecke; they drop below the row rather than squeezing into it. */
.tx-tariffwizard-step-tariff [data-dual-rate-fields],
.tx-tariffwizard-step-tariff .tx-tariffwizard-heating-metering {
    display: block;
    width: 100%;
    margin-top: 0.75em;
}

.tx-tariffwizard-step-tariff .tx-tariffwizard-heating-metering {
    border: 0;
    padding: 0;
}

.tx-tariffwizard-step-tariff .tx-tariffwizard-heating-metering label:has(input[type="radio"]) {
    display: flex;
    margin: 0.25em 0;
}

.tx-tariffwizard-step-tariff [data-role='refine-form'] button[type='submit'] {
    align-self: flex-start;
    width: auto;
    background: #e2001a;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.6em 1.8em;
    margin-top: 0.5em;
    cursor: pointer;
}

/* "Zurück" under the tiles: present but quiet - it leaves the comparison, it
   is not what the step is for. */
.tx-tariffwizard-step-tariff > button[data-action='back'] {
    background: none;
    border: none;
    padding: 0;
    color: #575757;
    text-decoration: underline;
    cursor: pointer;
}

/* The tile's own call to action, in CI red like the entry step's submit.
   Full width because it names the tariff and would otherwise wrap oddly. */
.tx-tariffwizard-offer-select {
    display: block;
    width: 100%;
    /* `auto` rather than a fixed gap: the tile is a flex column, so this is
       what pins the button to its bottom edge and makes a row of tiles end
       on one line. */
    margin-top: auto;
    padding: 0.7em 1em;
    border: none;
    border-radius: 999px;
    background: #e2001a;
    color: #fff;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

/* The call to action's own `margin-top: auto` cannot also carry a minimum
   gap, so the element in front of it keeps one - whichever that is, since a
   tile may end on the disclosure, the advantages or the price table. Same
   `:has()` support this file already relies on for the checkbox fields.

   The second selector is the collapsed disclosure, and it is what this rule
   was missing: the info list stays in the DOM as `hidden`, so it is the
   button's previous sibling even while `display: none` - the margin then
   landed on an invisible element and the band sat flush against the button
   (measured: 0px on the tile that defines the row's height). */
.tx-tariffwizard-offer > :has(+ .tx-tariffwizard-offer-select),
.tx-tariffwizard-offer > :has(+ [hidden] + .tx-tariffwizard-offer-select) {
    margin-bottom: 1em;
}

.tx-tariffwizard-offer-select:hover,
.tx-tariffwizard-offer-select:focus {
    background: #c40017;
}

@media (max-width: 767px) {
    .tx-tariffwizard-step-tariff [data-role='refine-form'] > .tx-tariffwizard-field,
    .tx-tariffwizard-step-tariff [data-usage-purpose-block] {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

/* ==========================================================================
   Submit and confirmation

   The last two screens. Legacy has almost nothing to translate here: its
   thank-you and rejection pages are plain body copy in the site's content
   styles (`p.bodytext-antrag`, h_grid layout.css:3486) and it has no
   submitting screen at all - the whole form is one POST, so the customer
   waits on a page load. The rules below therefore continue the wizard's own
   checkout language (the #242424 body colour, the grey/red button pair)
   rather than porting legacy geometry.

   Legacy's rejection page draws its heading on a red bar
   (`.antrag-farbschema-rot .layout-farbschema`, :3605). That is the product
   COLOUR SCHEME, used across every screen of that Antrag, not a rejection
   marker - so it is deliberately not reproduced here, where it would read as
   an error banner.
   ========================================================================== */

.tx-tariffwizard-step-submit,
.tx-tariffwizard-step-confirmation {
    color: #242424;
}

/* Legacy's body-copy rhythm on the confirmation pages (layout.css:3486),
   kept for both variants. */
.tx-tariffwizard-step-confirmation p {
    margin: 0.8em 1.175em;
}

.tx-tariffwizard-step-confirmation h2 {
    text-align: center;
}

/* The wait. Centred with a ring spinning above it, because this screen has
   no other content and a single line of text left-aligned under the header
   reads as a finished page rather than as something in progress. */
.tx-tariffwizard-submit-pending {
    margin: 40px 0;
    text-align: center;
}

.tx-tariffwizard-submit-pending::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 15px;
    border: 3px solid #eeeef0;
    border-top-color: #e2001a;
    border-radius: 50%;
    animation: tx-tariffwizard-spin 0.8s linear infinite;
}

@keyframes tx-tariffwizard-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Same rule the scroll behaviour follows (wizard.js): motion is decoration
   here, the ring still marks the spot without it. */
@media (prefers-reduced-motion: reduce) {
    .tx-tariffwizard-submit-pending::before {
        animation: none;
    }
}

.tx-tariffwizard-submit-failed {
    margin: 40px 0 10px;
    color: #b00020;
    font-size: 18px;
}

/* The server's own validation messages. Indented rather than bulleted flush
   left so they read as belonging to the sentence above them. */
.tx-tariffwizard-submit-errors {
    margin: 0 0 20px;
    padding-left: 20px;
    color: #b00020;
}

/* Same grey back button as the checkout steps (see the block above), minus
   the float - there is no second button on this screen to sit beside. */
.tx-tariffwizard-step-submit button[data-action="back"] {
    position: relative;
    width: 31%;
    min-width: 314px;
    height: 47px;
    margin: 0 0 10px;
    padding-left: 30px;
    border: none;
    background-color: #858688;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.tx-tariffwizard-step-submit button[data-action="back"]::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 15px;
    width: 8px;
    height: 8px;
    border: 0 solid transparent;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(-45deg);
}

@media (max-width: 767px) {
    .tx-tariffwizard-step-confirmation p {
        margin: 0.8em 0;
    }

    .tx-tariffwizard-step-submit button[data-action="back"] {
        width: 100%;
        min-width: 0;
    }
}

/* Solar module grid (FAIRENERGCR-477) - legacy's seat picker from
   z_onlineantraege New.html: green field, white = free, blue = chosen,
   grey = taken, an aisle after every block of six. */
.tx-tariffwizard-solar-grid {
    --seat: clamp(18px, 3.2vw, 36px);
    --gap: clamp(3px, 0.7vw, 9px);
    --aisle: clamp(8px, 1.6vw, 20px);
    margin: 1em 0 1.5em;
}

.tx-tariffwizard-solar-grid h3 {
    margin: 0 0 0.75em;
    padding: 0.5em;
    background: #ececec;
    text-align: center;
    text-transform: uppercase;
}

.tx-tariffwizard-solar-legend {
    margin: 0 0 0.6em;
    color: #555;
    font-size: 0.9rem;
}

.tx-tariffwizard-solar-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 12px;
    border: 1px solid #bbb;
    background: #fff;
    vertical-align: middle;
}

.tx-tariffwizard-solar-swatch:first-child {
    margin-left: 0;
}

.tx-tariffwizard-solar-map {
    box-sizing: border-box;
    width: 100%;
    padding: clamp(8px, 2vw, 18px);
    overflow-x: auto;
    background: #27ae60;
    border-radius: 4px;
}

.tx-tariffwizard-solar-row {
    display: flex;
    justify-content: center;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.tx-tariffwizard-solar-aisle {
    flex: 0 0 var(--aisle);
}

.tx-tariffwizard-solar-seat {
    flex: 0 0 var(--seat);
    width: var(--seat);
    height: var(--seat);
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.tx-tariffwizard-solar-seat:focus-visible {
    outline: 2px solid #2d3156;
    outline-offset: 2px;
}

.tx-tariffwizard-solar-seat.is-selected,
.tx-tariffwizard-solar-swatch.is-selected {
    background: #51599c;
    border-color: #2d3156;
}

.tx-tariffwizard-solar-seat.is-taken,
.tx-tariffwizard-solar-swatch.is-taken {
    background: #ccc;
    cursor: not-allowed;
}

.tx-tariffwizard-solar-seat.is-empty {
    visibility: hidden;
}

.tx-tariffwizard-solar-hint {
    margin: 0.5em 0 0;
    color: #666;
    font-size: 0.9rem;
}

/* Delivery ZIP taken from the tariff search, not editable (FAIRENERGCR-485). */
.tx-tariffwizard-step-customer-address input[readonly] {
    background: #f2f2f2;
    color: #555;
    cursor: not-allowed;
}

.tx-tariffwizard-field-hint {
    color: #666;
    font-size: 0.9rem;
}

/* BioGas options (FAIRENERGCR-490), legacy's layout: radio + name, then
   image (35 %) beside description and "zuzügliche Kosten" (65 %). */
.tx-tariffwizard-biogas-options {
    padding: 0 10px;
}

.tx-tariffwizard-biogas-option {
    margin: 0 0 24px;
}

.tx-tariffwizard-biogas-option-name {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    cursor: pointer;
}

.tx-tariffwizard-biogas-option-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tx-tariffwizard-biogas-option-image {
    flex: 0 0 35%;
    max-width: 35%;
    height: auto;
}

.tx-tariffwizard-biogas-option-text {
    flex: 1 1 auto;
}

.tx-tariffwizard-biogas-option-text p {
    margin: 0 0 8px;
}

.tx-tariffwizard-biogas-option-cost {
    font-weight: 600;
}

@media (max-width: 767px) {
    .tx-tariffwizard-biogas-option-body {
        display: block;
    }

    .tx-tariffwizard-biogas-option-image {
        max-width: 100%;
        margin-bottom: 10px;
    }
}