/* ---------------------------------------------------------------------
   Zum Muster ":not([style*='display: none'])"

   WHMCS blendet die Teile der Ergebnisanzeige per jQuery ein und aus -
   also ueber den inline-style. Die Klasse w-hidden bleibt dabei am
   Element kleben, auch wenn es sichtbar ist; sie taugt deshalb NICHT
   als Kennzeichen fuer "versteckt". Verlaesslich ist nur der
   inline-style.

   Ein "display: flex !important" von hier wuerde das Aus- und
   Einblenden aushebeln: der Sucher liefe ewig weiter, versteckte
   Knoepfe waeren sichtbar. Jede Regel, die display setzt, nimmt
   ausgeblendete Elemente deshalb aus. Regeln, die nur Farbe, Rahmen
   oder Abstand setzen, brauchen das nicht.

   Umgekehrt darf hier NIE ".w-hidden { display: none !important }"
   stehen - das hat in einer frueheren Fassung die Preise und
   Add-Knoepfe in den TLD-Karten dauerhaft verschwinden lassen.
   --------------------------------------------------------------------- */

:root {
    --hz-dom-border: var(--hz-line);
    --hz-dom-muted: var(--hz-muted);
    --hz-dom-text: var(--hz-navy);
    --hz-dom-red: var(--hz-primary);
    --hz-dom-green: var(--hz-success);
    --hz-dom-green-bg: var(--hz-success-soft);
}

/* =====================================================================
   0) EINE BREITE, EIN AUSSENABSTAND, EIN GRUND
   ---------------------------------------------------------------------
   Die Seite besteht untereinander aus: Hinweis, Suchzeile, den beiden
   Radioknoepfen, Ergebniszeile, TLD-Karten und Vorschlagsliste. Sie
   standen in drei verschiedenen Breiten.

   Ursache ist ".domain-selection-options .option" aus dem all.min.css
   des Bestellformulars: 20px seitliches Polster und ein grauer Grund.
   Alles, was in dieser Huelle liegt - Hinweis, Suchzeile, Radioknoepfe -
   ruecke damit 20px ein, waehrend Ergebniszeile, Karten und Vorschlaege
   als Geschwister davon ueber die volle Breite liefen. Der graue Grund
   legte zusaetzlich ein Band hinter den oberen Teil, das es sonst
   nirgends gibt.

   Die Huelle traegt hier nichts bei - sie gruppiert nur die drei
   Auswahlmoeglichkeiten. Ohne Polster und Grund stehen alle Bloecke der
   Seite auf derselben Kante und auf demselben Grund; die weissen Kaesten
   sind die Ergebniszeile, die Karten und die Vorschlagszeilen.
   ===================================================================== */

#order-standard_cart .domain-selection-options .option {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

#order-standard_cart .domain-selection-options .option:last-child {
    margin-bottom: 0 !important;
}

/* Die drei Zeilen zur Wahl (registrieren / umziehen / eigene Domain).

   Sie standen in 15px mit Gewicht 800 - schwerer als jede andere
   Beschriftung dieser Seite und schwerer als der Knopf 'Check', der
   die eigentliche Handlung ausloest. Auf einem Handy brach die
   mittlere Zeile dadurch um. 14.5px in 700 ist das Mass der Felder und
   des Knopfes darunter; es bleibt eine Beschriftung und wird nicht zur
   Ueberschrift. */
#order-standard_cart .domain-selection-options .option > label {
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
}

/* Auf dem Handy steht jede der drei Zeilen auf EINER Zeile.

   Die laengste ist "Bestehende Domain verwenden und Nameserver
   aktualisieren": in 14.5px/700 misst sie 456px, auf einem 390px
   breiten Handy stehen neben dem Radioknopf aber nur rund 320px zur
   Verfuegung. Eine feste Groesse passt deshalb nie fuer alle Geraete -
   sie waere entweder auf dem 360px-Handy zu gross oder auf dem 430px-
   Handy unnoetig klein.

   Die Schrift waechst stattdessen mit der Fensterbreite:
     - 70px sind die beiden Seitenraender (je 19px) plus Radioknopf mit
       Abstand (32px),
     - in 600 misst der Satz 30.8px je Pixel Schriftgroesse; geteilt wird
       durch 32, das laesst gut 3% Luft fuer eine abweichende
       Ersatzschrift.
   Ergibt 9.1px bei 360px, 10px bei 390px, 11.3px bei 430px. Ab 534px
   Breite ist die Obergrenze erreicht - das sind die 14.5px von oben,
   es gibt also keinen Sprung an der Grenze.

   600 statt 700: bei gleicher Breite eine halbe Nummer groessere
   Schrift, und bei dieser Groesse liest sich die groessere Schrift
   besser als die fettere. Der Aussenabstand rechts (10px aus custom.css)
   faellt weg - er war genau der Platz, der zur einen Zeile fehlte.

   Kein white-space:nowrap: rendert ein Geraet breiter als gemessen,
   bricht die Zeile lieber um, als ueber den Rand zu laufen. */
@media (max-width: 767px) {
    #order-standard_cart .domain-selection-options .option > label {
        margin-inline-end: 0 !important;
        font-size: clamp(9px, calc((100vw - 70px) / 32), 14.5px) !important;
        font-weight: var(--hz-fw-semibold) !important;
    }
}

/* Der Hinweis zu den syrischen Endungen ist entfernt.

   Er steht fest im Bestellformular (configureproductdomain.tpl unter
   templates/orderforms/standard_cart/) und gehoert nicht zu diesem
   Theme - hier laesst er sich nur ausblenden. Wer ihn wirklich loswerden
   will, loescht den <div class="alert alert-danger text-center"> in der
   Vorlage auf dem Server; diese Regel ist dann folgenlos.

   Andere Meldungen gibt es in .domain-selection-options nicht: die
   Fehler der Domainsuche stehen in #primaryLookupResult, ausserhalb
   dieser Huelle. */
#order-standard_cart .domain-selection-options .option > .alert {
    display: none !important;
}

/* =====================================================================
   1) SUCHZEILE:  [www.] [name] [.net] [Check]
   ---------------------------------------------------------------------
   Vorher: Bootstrap-Raster mit col-sm-8 + offset + col-sm-2. Der Knopf
   sass dadurch am rechten Rand, weit weg vom Feld, und alle vier
   Elemente waren 56px hoch bei 16-17px Schrift.

   Jetzt: eine zentrierte Flex-Zeile. Die Rasterklassen werden dafuer
   entschaerft (float/width/padding), nicht entfernt - entfernen ginge
   nur im Template.
   ===================================================================== */

#order-standard_cart .domain-input-group > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

#order-standard_cart .domain-input-group > .row > [class*="col-"],
#order-standard_cart .domain-input-group .domains-row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

#order-standard_cart .domain-input-group .domains-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
}

#order-standard_cart .domain-input-group .input-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
}

/* Die "www."-Box.
   Sie soll aussehen wie die TLD-Box daneben - gleicher Rahmen, gleicher
   Radius, gleiche Hoehe, gleicher Abstand - nur ausgegraut, weil sie
   nichts tut. Vorher war sie Bootstrap-Standard: #e9ecef mit anderem
   Rahmen und links angeklebt (Radius nur auf einer Seite). */
#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .input-group-prepend,
#order-standard_cart .domain-input-group .input-group-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Feldhoehe aus tokens.css wie Feld, Endung und Knopf (components.css
       B3). Mit 44px stand die Box 4px ueber die Zeile hinaus. */
    height: var(--hz-h-md) !important;
    min-height: var(--hz-h-md) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #eff2f7 !important;
    color: var(--hz-muted) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Der Prepend-Wrapper ist nur eine Huelle um den Text - er darf keinen
   zweiten Rahmen zeichnen, sonst steht der Rahmen doppelt. */
#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .input-group-prepend {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#order-standard_cart .domain-input-group .form-control,
#order-standard_cart .domain-input-group input[type="text"],
#order-standard_cart .domain-input-group select {
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background-color: #ffffff !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

#order-standard_cart .domain-input-group input[type="text"] {
    width: 340px !important;
    max-width: 100% !important;
}

#order-standard_cart .domain-input-group select {
    width: 120px !important;
    padding-right: 30px !important;
    font-weight: var(--hz-fw-semibold) !important;
}

/* Die Endung bei "Ich verwende meine bestehende Domain" ist ein
   Textfeld (#owndomaintld), keine Auswahlliste - WHMCS baut die dritte
   Option so. Ohne eigene Regel griff die 340px-Breite der Regel
   darueber auch hier: das Feld fuer "com" war damit genauso breit wie
   das Feld fuer den Domainnamen daneben.

   Es sitzt in derselben Rasterspalte (.col-3) wie die TLD-Auswahl der
   beiden anderen Optionen und bekommt deshalb dieselbe Breite und
   dasselbe Schriftgewicht. Der Selektor greift ueber die Lage in der
   Zeile statt ueber die ID: das Feld fuer den Domainnamen steckt in
   .input-group in der ERSTEN Spalte, die Endung immer in einer
   Folgespalte. */
#order-standard_cart .domain-input-group .domains-row > [class*="col-"] + [class*="col-"] input[type="text"] {
    flex: 0 0 auto !important;
    width: 120px !important;
    font-weight: var(--hz-fw-semibold) !important;
}

#order-standard_cart .domain-input-group .form-control:focus {
    border-color: var(--hz-dom-red) !important;
    box-shadow: 0 0 0 3px rgb(var(--hz-primary-rgb) / .10) !important;
}

/* Check / Transfer / Use - der Knopf steht jetzt direkt neben der
   TLD-Auswahl statt am rechten Rand der Spalte. */
#order-standard_cart .domain-input-group .btn,
#order-standard_cart .domain-input-group .btn-block {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 104px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* Auf schmalen Schirmen passen die vier Elemente nicht mehr in eine
   Zeile. Feld und TLD-Auswahl teilen sich die erste Zeile, der Knopf
   bekommt die zweite. Wichtig ist dabei justify-content: flex-start -
   bei "center" wird eine zu breite Zeile an BEIDEN Enden abgeschnitten,
   die "www."-Box lag dadurch links ausserhalb des Bildschirms. */
@media (max-width: 767px) {
    #order-standard_cart .domain-input-group > .row {
        justify-content: flex-start !important;
    }

    /* Die Rasterspalten nehmen hier die volle Breite ein - sonst richtet
       sich ihre Breite nach dem Inhalt und die Zeile laeuft ueber den
       rechten Rand hinaus. */
    #order-standard_cart .domain-input-group > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    #order-standard_cart .domain-input-group .domains-row {
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    #order-standard_cart .domain-input-group .domains-row > [class*="col-"]:first-child,
    #order-standard_cart .domain-input-group .input-group,
    #order-standard_cart .domain-input-group input[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Die "www."-Box ist reine Zierde und kostet hier ein Drittel der
       Zeilenbreite. */
    #order-standard_cart .domain-input-group .input-group-addon,
    #order-standard_cart .domain-input-group .input-group-prepend {
        display: none !important;
    }

    #order-standard_cart .domain-input-group select,
    #order-standard_cart .domain-input-group .domains-row > [class*="col-"] + [class*="col-"] input[type="text"] {
        flex: 0 0 auto !important;
        width: 104px !important;
    }

    #order-standard_cart .domain-input-group .btn {
        width: 100% !important;
    }
}

/* =====================================================================
   1b) TLD-AUSWAHL - eigene Liste statt der des Betriebssystems
   ---------------------------------------------------------------------
   Die aufgeklappte Liste eines nativen <select> zeichnet der Browser
   selbst: weisser Kasten, weite Zeilen, blaue Markierung, oeffnet je
   nach Platz nach oben. Daran ist mit CSS nichts zu machen.

   Deshalb steht hier dieselbe Bauart wie beim Zyklus-Dropdown der
   Produktseiten (.hp-select): das echte <select> bleibt als Datenhalter
   im Formular und wird unsichtbar, sichtbar sind Knopf und Liste. Das
   Markup dazu baut footer.tpl.

   Der Knopf behaelt bewusst das Aussehen der Suchzeile (gleicher
   Rahmen, gleiche Hoehe wie Feld und Check-Knopf) - nur die Liste folgt
   dem Vorbild der "36 Monate"-Liste, dort aber eine Nummer kleiner:
   13px Schrift und 6px Zeilenpolsterung statt 14px und 10px, weil hier
   ueber hundert Endungen untereinander stehen.
   ===================================================================== */

/* Die aufgeklappte Liste steht ausserhalb ihres Kastens - jedes
   overflow:hidden auf dem Weg dorthin wuerde sie abschneiden. Zu
   verbergen gibt es in diesen Huellen ohnehin nichts. */
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .domain-input-group,
#order-standard_cart .domain-input-group > .row,
#order-standard_cart .domain-input-group .domains-row,
#order-standard_cart .domain-input-group [class*="col-"] {
    overflow: visible !important;
}

#order-standard_cart .hz-select {
    position: relative !important;
    flex: 0 0 auto !important;
}

/* Breite je Einsatzort:
   - in der Suchzeile so schmal wie die alte TLD-Auswahl,
   - fuer die Auswahl "Domain aus dem Warenkorb" und den Abrechnungs-
     zyklus so breit, dass Domainname bzw. Preis hineinpassen. */
#order-standard_cart .domain-input-group .hz-select,
#order-standard_cart #frmConfigureProduct .hz-select {
    width: 280px !important;
    max-width: 100% !important;
}

/* Nur die TLD-Auswahl ist schmal. Sie steckt als einzige in einer
   Rasterspalte innerhalb von .domains-row; die Auswahl "Domain aus dem
   Warenkorb" liegt direkt darin und behaelt die 280px von oben.

   Muss NACH der Regel darueber stehen: bei gleicher Spezifitaet
   gewinnt die spaetere. */
#order-standard_cart .domains-row > [class*="col-"] .hz-select {
    width: 120px !important;
}

/* Der Datenhalter. Nicht display:none - WHMCS liest select.value, und
   ein Formularfeld soll auffindbar bleiben. */
#order-standard_cart .hz-select > select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#order-standard_cart .hz-select__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1 !important;
    text-align: start !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Hover aendert nur die Farbe - nie Groesse oder Lage. */
#order-standard_cart .hz-select__btn:hover {
    border-color: var(--hz-line-strong) !important;
}

#order-standard_cart .hz-select.is-open .hz-select__btn,
#order-standard_cart .hz-select__btn:focus {
    outline: none !important;
    border-color: var(--hz-dom-red) !important;
    box-shadow: 0 0 0 3px rgb(var(--hz-primary-rgb) / .10) !important;
}

#order-standard_cart .hz-select__label {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#order-standard_cart .hz-select__chev {
    display: flex !important;
    flex: 0 0 auto !important;
    opacity: .55 !important;
}

#order-standard_cart .hz-select.is-open .hz-select__chev {
    transform: rotate(180deg) !important;
}

/* Die Liste steht buendig unter dem Knopf und ist genau so breit wie er.

   Vorher wuchs sie nach ihrem Inhalt (width: max-content) und war bei
   220px gedeckelt. Das passte zur 120px schmalen TLD-Auswahl, nicht
   aber zu den 280px breiten Feldern des Konfigurationsschritts: dort
   stand unter einem breiten Feld eine deutlich schmalere Liste, und
   die sah aus, als gehoere sie nicht dazu. Eine aufgeklappte Liste ist
   die geoeffnete Form ihres Feldes - sie hat dessen Kante.

   Damit entfaellt auch der Grund fuer die Verankerung am hinteren Rand:
   eine Liste in Feldbreite kann nicht ueber den Bildschirmrand
   hinauslaufen, wenn es das Feld nicht tut. */
#order-standard_cart .hz-select__list {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    z-index: 1000 !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 264px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    margin: 0 !important;
    padding: 4px !important;
    list-style: none !important;
    border: 1px solid rgb(var(--hz-navy-900-rgb) / .08) !important;
    border-radius: var(--hz-radius) !important;
    background: var(--BackgroundColor, var(--hz-bg)) !important;
    box-shadow: var(--hz-shadow-lg) !important;
    text-align: start !important;
}

#order-standard_cart .hz-select.is-open .hz-select__list {
    display: block !important;
}

/* Schrift wie im Knopf und dieselbe Einrueckung: 4px Listenpolster
   plus 8px Zeilenpolster sind die 12px, mit denen die Beschriftung im
   geschlossenen Feld beginnt. So steht der gewaehlte Eintrag beim
   Aufklappen genau ueber seiner Zeile.

   Frueher standen hier 13px - eine Nummer kleiner als das Feld, weil
   ueber hundert Endungen untereinander stehen. Der Groessensprung war
   aber genau das, was die Liste vom Feld losloeste; die Laenge faengt
   max-height mit dem Rollbalken ab. */
#order-standard_cart .hz-select__opt {
    margin: 0 !important;
    padding: 7px 8px !important;
    border-radius: var(--hz-radius) !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

#order-standard_cart .hz-select__opt:hover {
    background: rgb(var(--hz-navy-900-rgb) / .06) !important;
}

#order-standard_cart .hz-select__opt.is-active {
    background: var(--PrimaryColor, var(--hz-primary)) !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    #order-standard_cart .domain-input-group .hz-select {
        width: 104px !important;
    }
}

/* =====================================================================
   1c) DOMAIN-KONFIGURATION  (cart.php?a=confdomains)
   ---------------------------------------------------------------------
   Der Schritt nach der Domainsuche. Hier stehen die Zusatzfelder der
   Endung - bei .ca etwa der "Legal Type".

   Vorher: ein nacktes <select>. Es erbte damit die allgemeine
   Formularregel aus custom.css [30.7] - 56px hoch bei 16px Schrift,
   also spuerbar groesser als jedes andere Auswahlfeld im Shop, und mit
   der Liste des Betriebssystems statt unserer eigenen.

   footer.tpl baut daraus jetzt dieselbe Bauart wie in der Suchzeile
   (.hz-select) und setzt dabei .hz-confdomains an den Bestellbereich.

   Hoehe, Rahmen, Schrift und Farben des Knopfes stehen schon in 1b und
   gelten fuer den ganzen Bestellbereich. Hier fehlen nur zwei Dinge:
   die Breite und der Umgang mit langen Beschriftungen.
   ===================================================================== */

/* Die Huelle nimmt die volle Spaltenbreite ein - wie das <select>
   vorher auch, damit sich an der Anordnung der Seite nichts aendert. */
#order-standard_cart.hz-confdomains .hz-select,
#order-standard_cart #frmConfigureDomains .hz-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Die Eintraege sind hier ganze Saetze ("ABO - Aboriginal Peoples
   indigenous to Canada") und keine Endungen. Sie duerfen deshalb
   umbrechen - die Liste ist so breit wie ihr Feld (Abschnitt 1b) und
   waechst nicht mit dem Text mit. */
#order-standard_cart.hz-confdomains .hz-select__opt,
#order-standard_cart #frmConfigureDomains .hz-select__opt {
    white-space: normal !important;
}

/* Bis das Skript greift - und falls es ausfaellt - steht hier noch das
   echte <select>. Es soll wenigstens nicht in der 56px-Groesse
   aufblitzen.

   Das :not() ist Pflicht: die umgewandelten Felder bleiben als
   Datenhalter im Formular stehen und werden in 1b auf 1px
   zusammengezogen. Ohne den Ausschluss wuerde diese Regel - gleich
   spezifisch, aber spaeter - sie wieder sichtbar machen. */
#order-standard_cart.hz-confdomains select:not([data-hz-enhanced]),
#order-standard_cart #frmConfigureDomains select:not([data-hz-enhanced]) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
}

/* =====================================================================
   2) ERGEBNISZEILE  ("beispiel.net is available.")
   ---------------------------------------------------------------------
   Vorbild ist die Domain-Registrierungsseite (cart.php?a=add&domain=
   register): eine weisse Zeile, links der Domainname, rechts die
   Preis-Plakette und der Knopf.

   Vorher standen hier zwei zentrierte Textzeilen - Ueberschrift und
   darunter "Continue to register this domain for ...". Der eigentliche
   Knopf war 1.700px weiter unten.
   ===================================================================== */

/* Der Abstand nach unten ist derselbe, den der Kartenblock nach unten
   haelt (#spotlightTlds) - Ergebniszeile, Karten und Vorschlagsliste
   stehen damit im gleichen Takt untereinander. */
#order-standard_cart #searchDomainInfo {
    margin: 22px 0 24px !important;
}

#order-standard_cart #primaryLookupResult:not([style*='display: none']) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 14px 12px 18px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    text-align: start !important;
}

/* Alles, was kein Teil der Zeile ist (Hinweise, IDN-Auswahl, Fehler),
   bekommt eine eigene Zeile darunter.

   Die drei Bestandteile der Zeile bekommen feste Reihenfolgewerte. Ohne
   die haengt es an der Reihenfolge im Markup: zwischen Preis und Knopf
   steht ein <p class="domain-error">, das auch leer eine ganze Zeile
   belegt - der Knopf rutschte dadurch in eine zweite Zeile, sobald
   WHMCS diesen Absatz sichtbar liess. */
#order-standard_cart #primaryLookupResult > * {
    order: 4 !important;
    flex: 0 0 100% !important;
}

#order-standard_cart #primaryLookupResult > .domain-available,
#order-standard_cart #primaryLookupResult > .domain-unavailable,
#order-standard_cart #primaryLookupResult > .domain-tld-unavailable {
    order: 1 !important;
    flex: 1 1 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.35 !important;
    text-align: start !important;
}

#order-standard_cart #primaryLookupResult > .domain-available {
    color: var(--hz-dom-green) !important;
}

#order-standard_cart #primaryLookupResult > .domain-unavailable,
#order-standard_cart #primaryLookupResult > .domain-tld-unavailable {
    color: var(--hz-dom-red) !important;
}

#order-standard_cart #primaryLookupResult > .domain-available strong,
#order-standard_cart #primaryLookupResult > .domain-unavailable strong,
#order-standard_cart #primaryLookupResult > .domain-tld-unavailable strong {
    color: inherit !important;
    font-size: 16px !important;
    font-weight: var(--hz-fw-bold) !important;
    word-break: break-all !important;
}

/* Preis-Plakette. Das Label ("Continue to register this domain for")
   faellt weg - in einer Zeile mit Knopf daneben sagt der Preis alles,
   und die Zeile bleibt in jeder Sprache gleich breit. */
/* Achtung, zwei verschiedene Bauformen unter demselben Klassennamen:

   Produkt-Bestellung:  <div class="domain-price"> Label + <span class="price">
   Domain-Registrierung: <p class="domain-price"> <span class="price"> + Add-to-Cart-Knopf

   Die gruene Plakette gilt nur der ersten Form. In der zweiten liegt der
   Knopf mit im selben Element - ein gruener Hintergrund lag dort hinter
   Preis UND Knopf. Deshalb faerbt die Regel nur, wo kein Knopf drin
   steckt; die zweite Form wird nur ausgerichtet. */
#order-standard_cart #primaryLookupResult > .domain-price:not([style*='display: none']):has(.btn) {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    padding: 0 !important;
    background: none !important;
}

#order-standard_cart #primaryLookupResult > .domain-price:not([style*='display: none']):not(:has(.btn)) {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    padding: 0 14px !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
}

#order-standard_cart #primaryLookupResult > .domain-price .register-price-label,
#order-standard_cart #primaryLookupResult > .domain-price .transfer-price-label {
    display: none !important;
}

#order-standard_cart #primaryLookupResult > .domain-price .price {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Der Knopf in der Zeile (aus footer.tpl eingesetzt, siehe dort).
   Er loest denselben Continue-Knopf aus, der sonst nur ganz unten
   stand. */
#order-standard_cart #primaryLookupResult > .hz-domain-cta:not([hidden]) {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

#order-standard_cart #primaryLookupResult > .transfer-eligible p,
#order-standard_cart #primaryLookupResult > .transfer-not-eligible p,
#order-standard_cart #primaryLookupResult > .domain-invalid p {
    margin: 0 0 4px !important;
    font-size: var(--hz-fs-control) !important;
    text-align: start !important;
}

/* Das Standard-Bestellformular gibt den Transfer-Hinweisen eigene grosse
   Abstaende und eine Mindesthoehe. Innerhalb unserer Ergebnis-Karte entsteht
   dadurch auf dem Handy die sichtbare leere Flaeche zwischen Preis und
   Meldung. Die Karte selbst uebernimmt bereits Rand, Grund und Polsterung. */
#order-standard_cart #primaryLookupResult > .transfer-eligible,
#order-standard_cart #primaryLookupResult > .transfer-not-eligible,
#order-standard_cart #primaryLookupResult > .domain-invalid {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    box-shadow: none !important;
}

#order-standard_cart #primaryLookupResult > .transfer-eligible {
    background: #e5f4df !important;
    color: var(--hz-dom-green) !important;
}

#order-standard_cart #primaryLookupResult > .transfer-not-eligible,
#order-standard_cart #primaryLookupResult > .domain-invalid {
    background: #fdefef !important;
    color: var(--hz-dom-red) !important;
}

#order-standard_cart #primaryLookupResult > .transfer-eligible > :first-child,
#order-standard_cart #primaryLookupResult > .transfer-not-eligible > :first-child,
#order-standard_cart #primaryLookupResult > .domain-invalid > :first-child {
    margin-top: 0 !important;
}

#order-standard_cart #primaryLookupResult > .transfer-eligible > :last-child,
#order-standard_cart #primaryLookupResult > .transfer-not-eligible > :last-child,
#order-standard_cart #primaryLookupResult > .domain-invalid > :last-child {
    margin-bottom: 0 !important;
}

/* Suchlaeufer ueber der Zeile - gleiche Hoehe wie die spaetere Zeile,
   damit beim Umschalten nichts springt. */
#order-standard_cart #primaryLookupSearching:not([style*='display: none']) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-control) !important;
    text-align: start !important;
}

#order-standard_cart .primary-domain-header {
    margin: 0 0 8px !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-bold) !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    text-align: start !important;
}

@media (max-width: 575px) {
    #order-standard_cart #primaryLookupResult > .domain-price {
        margin-inline-start: 0 !important;
    }
}

/* =====================================================================
   3) TLD-KARTEN unter der Ergebniszeile
   ---------------------------------------------------------------------
   Vorher: acht 87px schmale Kaesten in einer Float-Reihe, feste Hoehe
   112px mit overflow:hidden. Preis und Knopf lagen dadurch teils unter
   der Kartenkante ("Unavai...", abgeschnittene Preise), die Ecken-
   Baender ragten aus der Karte heraus, und waehrend des Ladens hatten
   die Karten eine andere Hoehe als danach - deshalb das Zucken.

   Jetzt: ein Raster mit gleich hohen Karten. Die Hoehe ist beim Laden
   und danach dieselbe, weil die Karte eine Mindesthoehe hat und der
   Ergebnisblock unten angeheftet ist (margin-top:auto).
   ===================================================================== */

/* Polster, Rand und Fuellung stammen aus dem all.min.css des Bestell-
   formulars (".spotlight-tlds { margin: 15px 0; padding: 7px 14px;
   background-color: #f8f8f8 }").

   Das seitliche Polster machte das Kartenraster 28px schmaler als die
   Ergebniszeile darueber und die Vorschlagsliste darunter - beide laufen
   ueber die volle Breite von #order-standard_cart. Der graue Grund legte
   ausserdem ein Band hinter die Karten, das es bei keinem anderen Block
   der Seite gibt: Ergebniszeile und Vorschlagsliste stehen ohne eigenen
   Grund auf der Seite, ihre weissen Kaesten sind die Karten bzw. Zeilen
   darin. Der Kartenblock folgt jetzt derselben Bauart - gleiche Breite,
   gleicher Aussenabstand, kein eigener Hintergrund.

   Der Abstand nach unten ist derselbe wie der zwischen Ergebniszeile und
   Karten (siehe #searchDomainInfo), damit die drei Bloecke im gleichen
   Takt stehen. */
#order-standard_cart #spotlightTlds {
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: none !important;
}

/* Genau vier Karten nebeneinander - eine feste Spaltenzahl, damit das
   unabhaengig von der Fensterbreite gilt; die automatische Aufteilung
   ergab je nach Breite drei oder fuenf.

   Produkt-Bestellung und Domain-Registrierung teilen sich diese Regel:
   die Karten sind auf beiden Seiten dieselben (siehe 3b), also stehen
   sie auch im selben Raster. */
#order-standard_cart #spotlightTlds .spotlight-tlds-container {
    display: grid !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld-container,
#order-standard_cart #spotlightTlds [class*="spotlight-tld-container-"] {
    display: flex !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    color: var(--hz-dom-text) !important;
    font-size: 16px !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.2 !important;
    word-break: break-all !important;
}

/* Kein Anheben unter dem Zeiger: acht Karten, die beim Ueberfahren
   springen, sind Unruhe auf einer Ergebnisseite. Geklickt wird der
   Knopf, nicht die Karte. */
#order-standard_cart #spotlightTlds .spotlight-tld:hover {
    transform: none !important;
}

/* "New"/"Hot" waren diagonale Ecken-Baender, die ueber den Kartenrand
   hinausragten. Jetzt kleine Plaketten in der Karte. */
#order-standard_cart #spotlightTlds .spotlight-tld-new,
#order-standard_cart #spotlightTlds .spotlight-tld-hot {
    top: 9px !important;
    bottom: auto !important;
    inset-inline-end: 9px !important;
    inset-inline-start: auto !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    transform: none !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: none !important;
    font-size: 9.5px !important;
    font-weight: var(--hz-fw-bold) !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-indent: 0 !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld-new {
    background: #dff5e6 !important;
    color: var(--hz-success) !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld-hot {
    background: #fde8e8 !important;
    color: var(--hz-primary-hover) !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld-new::before,
#order-standard_cart #spotlightTlds .spotlight-tld-new::after,
#order-standard_cart #spotlightTlds .spotlight-tld-hot::before,
#order-standard_cart #spotlightTlds .spotlight-tld-hot::after {
    display: none !important;
}

/* Ladezustand: der Laeufer sitzt mittig und haelt genau den Platz frei,
   den spaeter Preis und Knopf einnehmen. */
#order-standard_cart #spotlightTlds .domain-lookup-spotlight-loader:not([style*='display: none']) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: var(--hz-muted) !important;
    font-size: var(--hz-fs-body) !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result:not([style*='display: none']) {
    display: flex !important;
    padding: 0 !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result .price:not([style*='display: none']) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result .btn {
    margin: 0 !important;
    padding: 0 8px !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
}

/* Der Add-Knopf traegt dieselbe Farbe wie "Add to Cart" in der
   Vorschlagsliste - beides fuegt dasselbe hinzu. Vorher war er
   anthrazit und sah aus wie ein deaktivierter Knopf. */
#order-standard_cart #spotlightTlds .domain-lookup-result .btn-add-to-cart {
    background: linear-gradient(135deg, var(--hz-primary), var(--hz-primary-hover)) !important;
    color: #ffffff !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result .btn-add-to-cart:hover,
#order-standard_cart #spotlightTlds .domain-lookup-result .btn-add-to-cart:focus {
    background: linear-gradient(135deg, var(--hz-primary-hover), var(--hz-primary-hover)) !important;
    color: #ffffff !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result .btn.unavailable,
#order-standard_cart #spotlightTlds .domain-lookup-result .btn.invalid,
#order-standard_cart #spotlightTlds .domain-lookup-result .btn[disabled] {
    opacity: 1 !important;
    background: var(--hz-surface-2) !important;
    color: #7b8794 !important;
    cursor: not-allowed !important;
}

/* "Contact Support to Purchase" ist in einer 148px-Karte zu lang fuer
   eine Zeile - hier darf umbrochen werden.

   Der Knopf stand vorher als roter Text auf weissem Grund in der weissen
   Karte: keine Fuellung, und auch kein Rahmen - die Regel darueber setzt
   "border: 0" fuer jeden .btn in der Karte, ein blosses border-color
   dagegen laesst den Stil auf "none" und die Breite auf 0. Er las sich
   damit wie eine Bildunterschrift; dass er anklickbar ist, sah man erst
   beim Ueberfahren.

   Jetzt traegt er eine eigene, helle Fuellung mit Rahmen. Heller als der
   rote "Add"-Knopf daneben: beide sind anklickbar, aber nur einer kauft.
   Hover vertieft dieselbe Fuellung - nur Farbe, keine Bewegung.

   Der Rahmen muss in der Kurzform stehen (border, nicht border-color),
   und der Selektor braucht .domain-lookup-result - sonst gewinnt das
   "border: 0" der Regel oben. */
#order-standard_cart #spotlightTlds .domain-lookup-result .domain-contact-support {
    border: 1px solid #f0bfc0 !important;
    background: var(--hz-primary-soft) !important;
    color: var(--hz-primary-hover) !important;
    white-space: normal !important;
    overflow: visible !important;
    /* Die Karte erbt "word-break: break-all" - das ist fuer lange
       Endungen gedacht, brach die Beschriftung hier aber mitten im Wort
       ("...to Purchas / e"). Umbrochen wird zwischen Woertern; nur wenn
       ein einzelnes Wort breiter ist als der Knopf, darf es brechen. */
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result .domain-contact-support:hover,
#order-standard_cart #spotlightTlds .domain-lookup-result .domain-contact-support:focus {
    border-color: #e39fa1 !important;
    background: #fbdcdd !important;
    color: var(--hz-primary-hover) !important;
}

/* =====================================================================
   3b) TLD-KARTEN DER PRODUKT-BESTELLUNG WIE AUF DER DOMAINSUCHE
   ---------------------------------------------------------------------
   Vorbild ist die Domain-Registrierungsseite (cart.php?a=add&domain=
   register). Deren Vorlage - sie gehoert nicht zu diesem Theme - baut
   die Karten mit Symbol, Endungsname und einem eigenen Ergebnisblock
   auf und legt die Sichtbarkeit an einer Zustandsklasse fest:

       is-available - frei, echter Preis        -> Preis + "Add"
       is-taken     - vergeben                  -> "Unavailable"
       is-invalid   - fuer die Endung ungueltig -> "Unavailable"
       is-unknown   - die Registry antwortet nicht, ein Preis liegt aber
                      vor (derzeit alle .sy-Endungen)
                      -> Preis + "Contact Support to Purchase"

   Die Bestellvorlage der Produkte kennt diesen Aufbau nicht. Sie liefert
   dieselben Knoepfe im Markup mit - auch "Contact Support to Purchase" -,
   zeigt aber nach WHMCS-Logik bei jeder nicht freien Endung schlicht
   "Unavailable". Bei .sy ist das falsch: die Endung ist nicht vergeben,
   die Registry gibt nur keine Auskunft.

   footer.tpl ergaenzt deshalb auf dieser Seite dieselben Klassen und
   setzt dieselbe Zustandsklasse; die Regeln hier machen daraus dasselbe
   Bild. Karte, Plakette, Preisfeld und Knoepfe stehen bereits in 3) und
   gelten fuer beide Seiten - hier kommt nur dazu, was die Vorlage der
   Registrierungsseite als eigenes \3c style> mitbringt.
   ===================================================================== */

/* Kopfzeile der Karte. Sie enthaelt nur das Symbol - die Plakette
   ("New"/"Hot") liegt nach 3) absolut in der Kartenecke und nimmt hier
   keinen Platz ein. Die Mindesthoehe haelt den Platz auch dort frei, wo
   keine Plakette steht, damit alle Karten gleich hoch beginnen. */
#order-standard_cart #spotlightTlds .custom-card-top {
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

#order-standard_cart #spotlightTlds .custom-domain-icon {
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: linear-gradient(135deg, var(--hz-info-soft), var(--hz-info-soft)) !important;
    color: var(--hz-link) !important;
    font-size: var(--hz-fs-body) !important;
    box-shadow:
        var(--hz-shadow-md) !important;
}

#order-standard_cart #spotlightTlds .custom-domain-icon i {
    font-size: var(--hz-fs-body) !important;
    line-height: 1 !important;
}

/* Die Endung. In der Produkt-Bestellung steht sie als blosser Text in
   der Karte; footer.tpl legt sie in dieselbe Huelle wie drueben. */
#order-standard_cart #spotlightTlds .custom-domain-name {
    display: block !important;
    color: var(--hz-dom-text) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.25 !important;
}

/* ---------------------------------------------------------------------
   Sichtbarkeit im Ergebnisblock

   Ab dem Augenblick, in dem eine Antwort vorliegt (.has-result),
   entscheidet allein die Zustandsklasse, was in der Karte steht. Vorher
   bleibt alles, wie WHMCS es steuert - sonst waere der Suchlaeufer beim
   ersten Aufbau der Seite dauerhaft sichtbar.

   Warum das ueberhaupt noetig ist: WHMCS blendet die Knoepfe per jQuery
   ein und aus, also ueber den inline-style. Ein inline-style schlaegt
   jede Regel ohne !important - und mit !important schlaegt die Regel
   umgekehrt jedes Einblenden. Beides zugleich geht nicht, deshalb haengt
   die Anzeige hier an der Klasse und nicht am inline-style.
   --------------------------------------------------------------------- */
#order-standard_cart #spotlightTlds .spotlight-tld.has-result .domain-lookup-result > *,
#order-standard_cart #spotlightTlds .spotlight-tld.has-result .domain-lookup-spotlight-loader {
    display: none !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld.has-result .domain-lookup-result {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
}

#order-standard_cart #spotlightTlds .spotlight-tld.is-available .custom-domain-btn-add,
#order-standard_cart #spotlightTlds .spotlight-tld.is-taken .btn.unavailable,
#order-standard_cart #spotlightTlds .spotlight-tld.is-invalid .btn.invalid,
#order-standard_cart #spotlightTlds .spotlight-tld.is-unknown .domain-contact-support {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Freier Preis - gruene Plakette, wie in der Ergebniszeile darueber. */
#order-standard_cart #spotlightTlds .spotlight-tld.is-available .custom-domain-price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
}

/* Preis ohne Auskunft der Registry - bewusst nicht gruen: der Preis
   stimmt, ob die Endung frei ist, weiss niemand. Dieselbe blaue
   Plakette wie auf der Domainsuche. */
#order-standard_cart #spotlightTlds .spotlight-tld.is-unknown .custom-domain-price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 32px !important;
    margin: 0 0 8px !important;
    padding: 0 8px !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-info-soft) !important;
    color: var(--hz-link) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
}

/* =====================================================================
   4) VORSCHLAEGE
   ---------------------------------------------------------------------
   Reihenfolge auf der Seite: Ergebniszeile -> TLD-Karten -> Vorschlaege.
   Die Karten standen im Markup schon vor der Vorschlagsliste; hier wird
   nur der Abstand gesetzt, damit die drei Bloecke als Abfolge lesbar
   sind.
   ===================================================================== */

#order-standard_cart .suggested-domains {
    margin-top: 0 !important;
}

/* =====================================================================
   5) CONTINUE
   ---------------------------------------------------------------------
   Zwei Probleme, beide von derselben Regel in custom.css:
   "#order-standard_cart .text-center" macht aus JEDEM zentrierten
   Kasten eine Hero-Box mit 44px Polsterung und zwei dekorativen
   Kreisen. Getroffen wurde damit auch der schlichte <div class=
   "text-center"> um die Continue-Knoepfe.

   Folge 1: der Knopf sass in einem grossen leeren Kasten ganz unten.
   Folge 2: die Kreise (::before/::after) lagen UEBER dem Knopf - auf
   der Konfigurationsseite liess er sich nur am rechten Rand anklicken,
   weil dort keiner der beiden Kreise lag.
   ===================================================================== */

/* Dekoration faengt keine Klicks mehr ab. Das ist die eigentliche
   Reparatur des "Knopf reagiert nur am Rand"-Fehlers und wirkt auch
   dort, wo :has() nicht unterstuetzt wird. */
#order-standard_cart .text-center::before,
#order-standard_cart .text-center::after {
    pointer-events: none !important;
}

#order-standard_cart .text-center .btn,
#order-standard_cart .text-center button {
    position: relative !important;
    z-index: 3 !important;
}

/* Ein zentrierter Kasten, in dem nur ein Knopf steht, ist keine Hero-
   Box - Polsterung, Hintergrund und Kreise entfallen dort. */
#order-standard_cart .text-center:has(> .btn:only-child),
#order-standard_cart .text-center:has(> button:only-child) {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#order-standard_cart .text-center:has(> .btn:only-child)::before,
#order-standard_cart .text-center:has(> .btn:only-child)::after,
#order-standard_cart .text-center:has(> button:only-child)::before,
#order-standard_cart .text-center:has(> button:only-child)::after {
    display: none !important;
}

/* Dieselbe Regel traf auch den Fuss der Vorschlagsliste ("Give me more
   suggestions!") und den Hinweis darunter - beide standen in einem
   34px hohen Dekorkasten mit eigenen Kreisen mitten im Panel. */
#order-standard_cart .suggested-domains .text-center {
    margin-bottom: 0 !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#order-standard_cart .suggested-domains .text-center::before,
#order-standard_cart .suggested-domains .text-center::after {
    display: none !important;
}

#order-standard_cart .suggested-domains .domain-suggestions-warning p {
    margin: 0 !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Der Original-Knopf am Seitenende bleibt im Formular (er traegt die
   Absende-Logik), wird aber unsichtbar: bedient wird ab jetzt der
   Knopf in der Ergebniszeile oder der in der Seitenleiste.
   display:none waere hier falsch - ein ausgeblendeter Submit-Knopf
   soll weiterhin klickbar bleiben. */
#order-standard_cart #frmProductDomainSelections > .text-center {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Von footer.tpl gesetzt, solange es nichts zu bestaetigen gibt. */
#order-standard_cart .hz-domain-cta[hidden],
#order-standard_cart .hz-continue-dock[hidden] {
    display: none !important;
}

/* Andockstelle in der linken Spalte. position:sticky funktioniert hier,
   weil .row ein Flex-Container ist und die Spalte damit ueber die volle
   Zeilenhoehe reicht. */
#order-standard_cart .hz-continue-dock {
    position: sticky !important;
    top: 96px !important;
    z-index: 5 !important;
    margin: 0 0 16px !important;
    padding: 14px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
}

#order-standard_cart .hz-continue-dock .hz-continue-dock-domain {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.35 !important;
    word-break: break-all !important;
    text-align: center !important;
}

#order-standard_cart .hz-continue-dock .hz-continue-dock-domain strong {
    display: block !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
}

#order-standard_cart .hz-continue-dock-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Auf schmalen Schirmen steht die Seitenleiste ueber dem Inhalt - dort
   waere ein klebender Knopf ganz oben nutzlos. Er wandert an den
   unteren Rand des Fensters. */
@media (max-width: 767px) {
    /* Die linke Spalte ist auf schmalen Schirmen ausgeblendet (statt
       ihrer stehen oben zwei Auswahlfelder). Sie wird hier wieder
       eingeblendet, aber nur fuer die Andockstelle - alles andere in
       ihr bleibt aus. */
    #order-standard_cart .cart-sidebar {
        display: block !important;
        float: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #order-standard_cart .cart-sidebar > *:not(.hz-continue-dock) {
        display: none !important;
    }

    #order-standard_cart .hz-continue-dock {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        z-index: 1030 !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    #order-standard_cart .hz-continue-dock .hz-continue-dock-domain {
        margin-bottom: 6px !important;
    }
}

/* =====================================================================
   6) KONFIGURATIONSSCHRITT  (cart.php?a=confproduct)
   ---------------------------------------------------------------------
   Dort taucht die eben gewaehlte Domain nirgends auf - weder im Text
   noch in der Bestelluebersicht; sie landet erst einen Schritt spaeter
   im Warenkorb. Die Zeile hier sagt, wofuer die Konfiguration gilt.
   Eingesetzt wird sie von footer.tpl aus dem, was der Domain-Schritt
   gemerkt hat.
   ===================================================================== */

#order-standard_cart .hz-config-domain {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-control) !important;
    line-height: 1.35 !important;
}

#order-standard_cart .hz-config-domain i {
    color: var(--hz-dom-red) !important;
    font-size: var(--hz-fs-body) !important;
}

#order-standard_cart .hz-config-domain strong {
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-bold) !important;
    word-break: break-all !important;
}

#order-standard_cart .order-summary .hz-summary-domain {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 4px 0 0 !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
}

#order-standard_cart .order-summary .hz-summary-domain-name {
    word-break: break-all !important;
}

#order-standard_cart .order-summary .hz-summary-domain i {
    margin-inline-end: 6px !important;
    color: var(--hz-dom-red) !important;
}

#order-standard_cart .order-summary .hz-summary-domain-price {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

#order-standard_cart .order-summary .hz-summary-domain-note {
    margin: 2px 0 10px !important;
    color: var(--hz-muted) !important;
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.35 !important;
}

/* --- Das bestellte Paket hervorheben ------------------------------- */
#order-standard_cart .secondary-cart-body .product-info {
    position: relative !important;
    margin: 0 0 20px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--hz-primary-soft) !important;
    border-inline-start: 4px solid var(--hz-dom-red) !important;
    border-radius: var(--hz-radius) !important;
    background: linear-gradient(135deg, var(--hz-primary-soft) 0%, var(--hz-bg) 100%) !important;
}

#order-standard_cart .secondary-cart-body .product-info .product-title {
    margin: 0 0 4px !important;
    color: var(--hz-dom-red) !important;
    font-size: var(--hz-fs-h3) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.3 !important;
}

#order-standard_cart .secondary-cart-body .product-info p {
    margin: 0 !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.7 !important;
}

#order-standard_cart .secondary-cart-body .product-info strong {
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
}

/* --- Bestelluebersicht --------------------------------------------- */
#order-standard_cart .order-summary h2 {
    padding: 16px 20px !important;
}

#order-standard_cart .summary-container {
    padding: 16px 18px !important;
    font-size: var(--hz-fs-small) !important;
}

#order-standard_cart .summary-container .product-name {
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-bold) !important;
}

#order-standard_cart .summary-container .product-group {
    font-size: var(--hz-fs-small) !important;
}

#order-standard_cart .total-due-today .amt {
    font-size: 24px !important;
    font-weight: var(--hz-fw-bold) !important;
}

/* --- 8.1  Felder: Groesse ------------------------------------------ */

/* Kein height, nur min-height: das Bemerkungsfeld (textarea, rows="4")
   steht im selben Satz Selektoren und darf wachsen. */
#order-standard_cart #frmCheckout .field,
#order-standard_cart #frmCheckout .form-control,
#order-standard_cart #frmCheckout input[type="text"],
#order-standard_cart #frmCheckout input[type="tel"],
#order-standard_cart #frmCheckout input[type="email"],
#order-standard_cart #frmCheckout input[type="password"],
#order-standard_cart #frmCheckout select {
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    line-height: 1.4 !important;
}

#order-standard_cart #frmCheckout textarea.form-control,
#order-standard_cart #frmCheckout textarea.field {
    min-height: 92px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Waagerechte Abstaende getrennt gesetzt, weil die Felder mit Symbol
   vorn mehr Platz brauchen als die ohne. */
#order-standard_cart #frmCheckout .field,
#order-standard_cart #frmCheckout .form-control {
    padding-inline: 12px !important;
}

/* --- 8.2  Felder: Symbol vorn --------------------------------------- */

/* standard_cart setzt weder left noch right - das Symbol landet also
   von selbst am Zeilenanfang und dreht in der arabischen Fassung mit.
   Hier bleibt das so; korrigiert wird nur die Hoehe. */
#order-standard_cart #frmCheckout .prepend-icon .field-icon {
    top: 0 !important;
    width: 38px !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 0 !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-regular) !important;
}

#order-standard_cart #frmCheckout .prepend-icon .field-icon i {
    font-size: var(--hz-fs-small) !important;
    color: var(--hz-muted) !important;
}

/* Der Platz dafuer im Feld. Die beiden Telefonfelder sind ausgenommen:
   dort steht die Flagge vorn, und wie breit die ist, bestimmt
   Abschnitt 8.4. */
#order-standard_cart #frmCheckout .prepend-icon .field:not(#inputPhone):not(#inputDCPhone),
#order-standard_cart #frmCheckout .prepend-icon .form-control:not(#inputPhone):not(#inputDCPhone) {
    padding-inline-start: 38px !important;
}

/* --- 8.3  Auswahlfelder (.hz-select) -------------------------------- */

/* Die Breiten weiter oben gelten fuer die Domain-Suche (120px) und den
   Konfigurationsschritt (280px). Im Checkout fuellt jede Auswahl ihre
   Rasterspalte - Laendernamen sind lang. */
#order-standard_cart #frmCheckout .hz-select {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
}

#order-standard_cart #frmCheckout .hz-select__btn {
    height: 44px !important;
    font-weight: var(--hz-fw-semibold) !important;
}

/* Steht die Auswahl in einer Gruppe mit Symbol (Land, Bundesland),
   bleibt das Symbol stehen - der Knopf macht ihm Platz. */
#order-standard_cart #frmCheckout .prepend-icon .hz-select__btn {
    padding-inline-start: 38px !important;
}

/* Laendernamen sind lang; die Liste ist so breit wie ihr Feld
   (Abschnitt 1b) und darf deshalb umbrechen. Das Gewicht folgt dem
   Knopf darueber, der hier leichter steht als in der Domainsuche. */
#order-standard_cart #frmCheckout .hz-select__opt {
    font-weight: var(--hz-fw-semibold) !important;
    white-space: normal !important;
}

/* --- 8.4  Vorwahl (intl-tel-input) ---------------------------------- */

/* Diese Auswahl gehoert dem Fremdbaustein intl-tel-input und laesst
   sich nicht durch .hz-select ersetzen - der Baustein schreibt beim
   Auswaehlen selbst in das Feld und haengt an der eigenen Liste.
   Nachgebildet wird deshalb nur das Aussehen: dieselbe Liste,
   dieselben Zeilen, dieselben Farben.

   Anmerkung zur Richtung: der Baustein setzt "left: 0" fest
   (.allow-dropdown .flag-container) und bleibt auch in der arabischen
   Fassung links. Hier stehen deshalb bewusst feste Seiten, keine
   logischen Eigenschaften - sonst stuenden Rahmen und Rundung auf der
   falschen Seite. */
#order-standard_cart #frmCheckout .intl-tel-input {
    display: block !important;
    width: 100% !important;
}

/* Das Feldsymbol (Hoerer) lag genau auf der Flagge - zwei Zeichen
   uebereinander. Die Flagge fuehrt hier, das Symbol entfaellt. */
#order-standard_cart #frmCheckout label.field-icon[for="inputPhone"],
#order-standard_cart #frmCheckout label.field-icon[for="inputDCPhone"] {
    display: none !important;
}

/* intl-tel-input staffelt die Breite des Vorwahl-Blocks ueber die
   Klassen iti-sdc-2 bis iti-sdc-5 - je nach Laenge der Vorwahl (+1,
   +49, +963, +1242). Diese Staffel hat custom.css mit
   "padding: 14px 16px !important" ueberfahren: die Nummer lag danach
   unter der Flagge.

   Hier stand daraufhin EINE feste Breite von 84px fuer alle vier
   Faelle. Die reicht nur bis +49. So sieht der Block von innen aus:

       0 .. 10   Rand
      10 .. 30   Flagge (liegt absolut, left: 10px)
      38 ..      die Vorwahl (Zelle mit padding-left: 28px)
       Breite-15 .. Breite-9   der Pfeil (liegt absolut, right: 9px)

   Bei 84px endet der Platz fuer die Schrift also bei 69px, es bleiben
   31px ab 38px. "+963" braucht in 14px/600 aber 32px, "+1242" sogar
   40px - der Pfeil lag auf der letzten Ziffer. Deshalb ist die
   Staffel jetzt doch nachgebaut, mit derselben Rechnung:
   38 + Schriftbreite + 6px Luft + 15px Pfeil.

   Das Polster des Feldes muss mitwachsen, sonst beginnt die
   Rufnummer unter dem Vorwahl-Block. Es bleibt bei "padding-left":
   der Baustein haelt die Flagge auch in der arabischen Fassung
   links (siehe Anmerkung zur Richtung oben). */
#order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code .selected-flag {
    width: 84px !important;
    /* Kein Polster: Flagge, Vorwahl und Pfeil verteilt custom.css [00.5]
       mit gleichen Abstaenden ueber die ganze Breite. */
    padding: 0 !important;
    border-right: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) 0 0 var(--hz-radius) !important;
    background: var(--hz-bg) !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.iti-sdc-3 .selected-flag {
    width: 88px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.iti-sdc-4 .selected-flag {
    width: 96px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.iti-sdc-5 .selected-flag {
    width: 104px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code .selected-dial-code {
    padding: 0 !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-semibold) !important;
    white-space: nowrap !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
    background: #eef1f7 !important;
}

#order-standard_cart #frmCheckout .intl-tel-input input[type="tel"] {
    padding-left: 96px !important;
    padding-right: 12px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.iti-sdc-3 input[type="tel"] {
    padding-left: 100px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.iti-sdc-4 input[type="tel"] {
    padding-left: 108px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input.iti-sdc-5 input[type="tel"] {
    padding-left: 116px !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .selected-flag .iti-arrow {
    border-top-color: var(--hz-dom-muted) !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .selected-flag .iti-arrow.up {
    border-bottom-color: var(--hz-dom-muted) !important;
}

/* Die Liste - dieselbe Bauart wie .hz-select__list.
   custom.css begrenzt jede Laenderliste von intl-tel-input auf 80px
   Hoehe; das sind drei Zeilen, in denen sich niemand zurechtfindet.
   Und "overflow-y: scroll" des Bausteins zeigt den Rollbalken auch
   dann, wenn nichts zu rollen ist. */
#order-standard_cart #frmCheckout .intl-tel-input .country-list {
    max-height: 264px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    margin: 6px 0 0 !important;
    padding: 6px !important;
    border: 1px solid rgb(var(--hz-navy-900-rgb) / .08) !important;
    border-radius: var(--hz-radius) !important;
    background: var(--BackgroundColor, var(--hz-bg)) !important;
    box-shadow: var(--hz-shadow-lg) !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list .country {
    padding: 6px 10px !important;
    border-radius: var(--hz-radius) !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.4 !important;
}

/* .highlight setzt der Baustein beim Ueberfahren und beim Blaettern
   mit den Pfeiltasten, .active auf den gewaehlten Eintrag - dieselbe
   Aufteilung wie .hz-select__opt:hover und .hz-select__opt.is-active. */
#order-standard_cart #frmCheckout .intl-tel-input .country-list .country.highlight {
    background: rgb(var(--hz-navy-900-rgb) / .06) !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list .country.active {
    background: var(--PrimaryColor, var(--hz-primary)) !important;
    color: #ffffff !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list .country.active .dial-code,
#order-standard_cart #frmCheckout .intl-tel-input .country-list .country.active .country-name {
    color: #ffffff !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list .country .dial-code {
    color: var(--hz-dom-muted) !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list .divider {
    margin: 6px 4px !important;
    padding: 0 !important;
    border-bottom: 1px solid rgb(var(--hz-navy-900-rgb) / .08) !important;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list::-webkit-scrollbar {
    width: 8px;
}

#order-standard_cart #frmCheckout .intl-tel-input .country-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--hz-radius);
    background: rgb(var(--hz-navy-900-rgb) / .22);
    background-clip: content-box;
}

/* custom.css [30.5] baut den Kopf der Transfer-Seite: 44px Innenabstand,
   Verlauf, Schatten, abgerundet, dazu zwei Zierkreise in ::before und
   ::after. Der Selektor dafuer lautet aber schlicht
   "#order-standard_cart .text-center" - und trifft im Checkout vier
   schlichte Huellen (Anmelde-Knopf, Captcha, Zahlungsarten, Zustimmung
   samt Bestellknopf), die Summenzeile und die Beschriftung unter dem
   Passwortbalken. Aus jeder wurde eine grosse Karte; das war der
   groesste Einzelposten an ueberfluessiger Hoehe auf der Seite.

   Zentriert bleiben sie - nur der Kasten faellt weg. Die Farben der
   Meldungskaesten stehen in 8.8, weil sie hier mit wegfallen.
   Geaendert wird das nur im Checkout: auf der Transfer-Seite ist der
   Kasten gewollt. */
#order-standard_cart #frmCheckout .text-center {
    overflow: visible !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#order-standard_cart #frmCheckout .text-center::before,
#order-standard_cart #frmCheckout .text-center::after {
    content: none !important;
}

/* Derselbe Block setzt jeden Absatz darin auf 18px und 720px Breite -
   gedacht war die Zeile unter der grossen Ueberschrift. */
#order-standard_cart #frmCheckout .text-center p {
    max-width: none !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Abstand zwischen Zahlungsarten und Bestellknopf, den vorher der
   Innenabstand des Kastens gemacht hat. */
#order-standard_cart #frmCheckout > .text-center:last-child {
    margin-top: 22px !important;
}

/* --- 8.6  Dichte: Beschriftungen, Zwischenueberschriften, Abstaende -- */

/* custom.css setzt jede Beschriftung im Bestellbereich auf 15px/800 -
   das ist die Groesse einer Zwischenueberschrift, nicht die einer
   Feldbeschriftung. Die Symbol-Beschriftungen sind ausgenommen: sie
   tragen keinen Text, ihre Masse stehen in 8.2. */
#order-standard_cart #frmCheckout label:not(.field-icon) {
    margin-bottom: 6px !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
}

#order-standard_cart #frmCheckout .form-group {
    margin-bottom: 14px !important;
}

#order-standard_cart #frmCheckout .field-container {
    margin-bottom: 14px !important;
}

#order-standard_cart .sub-heading {
    margin-top: 26px !important;
    margin-bottom: 22px !important;
}

#order-standard_cart .sub-heading span {
    top: -10px !important;
    padding: 0 14px !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
}

#order-standard_cart .sub-heading span small {
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-regular) !important;
}

#order-standard_cart .already-registered {
    margin-bottom: 18px !important;
}

#order-standard_cart .already-registered p {
    margin: 0 !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

#order-standard_cart #frmCheckout p.small,
#order-standard_cart #frmCheckout .field-help-text,
#order-standard_cart #frmCheckout .field-error-msg {
    font-size: var(--hz-fs-mini) !important;
    line-height: 1.45 !important;
}

/* --- 8.7  Dichte: Knoepfe ------------------------------------------- */

/* 17px Schrift und 14px/30px Innenabstand kommen aus custom.css und
   gelten dort fuer den Weiter-Knopf des Domain-Schritts. Im Checkout
   stehen mehrere Knoepfe nebeneinander (Anmelden, Passwort erzeugen,
   Bestellung abschliessen) - die duerfen die Seite nicht dominieren. */
#order-standard_cart .already-registered .btn,
#order-standard_cart #frmCheckout .btn {
    min-height: 40px !important;
    padding: 0 20px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    box-shadow: none !important;
}

/* Der Abschluss-Knopf bleibt der groesste auf der Seite - aber in
   Massen. */
#order-standard_cart #frmCheckout #btnCompleteOrder {
    min-height: 48px !important;
    padding: 0 32px !important;
    font-size: 15.5px !important;
    box-shadow: var(--hz-shadow-md) !important;
}

/* Der Fragezeichen-Knopf neben dem Pruefcode steht in einer
   .input-group und muss so hoch sein wie das Feld daneben. */
#order-standard_cart #frmCheckout .input-group .btn {
    min-height: 44px !important;
    padding: 0 12px !important;
}

/* --- 8.8  Dichte: Hinweise, Passwortstaerke, Zahlungsarten ---------- */

#order-standard_cart #frmCheckout .alert,
#order-standard_cart .checkout-error-feedback {
    padding: 12px 14px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Die Farbe der Meldungskaesten steht sonst in .alert-success bzw.
   .alert-danger - eine Klasse, also schwaecher als der Verlauf aus
   custom.css, den 8.5 gerade abgeraeumt hat. Ohne diese drei Regeln
   waeren die Kaesten danach farblos. */
#order-standard_cart #frmCheckout .alert-success {
    border: 1px solid rgba(21, 128, 61, .20) !important;
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
}

#order-standard_cart #frmCheckout .alert-danger {
    border: 1px solid rgb(var(--hz-primary-rgb) / .20) !important;
    background: var(--hz-primary-soft) !important;
    color: var(--hz-dom-red) !important;
}

#order-standard_cart #frmCheckout .alert-info {
    border: 1px solid rgba(53, 94, 152, .20) !important;
    background: #eef4fd !important;
    color: var(--hz-link) !important;
}

#order-standard_cart #frmCheckout #totalDueToday {
    font-size: var(--hz-fs-body) !important;
}

#order-standard_cart #frmCheckout .password-strength-meter .progress {
    height: 6px !important;
    margin-bottom: 6px !important;
    border-radius: var(--hz-radius) !important;
}

#order-standard_cart #frmCheckout #passwordStrengthTextLabel {
    margin: 0 !important;
    font-size: var(--hz-fs-mini) !important;
}

/* Der Mailinglisten-Block steht ausserhalb jeder .text-center-Huelle
   und blieb deshalb in seinen Ausgangsgroessen stehen: eine 18px-
   Ueberschrift (Klasse font-size-18 im Template) ueber einem Absatz in
   Fliesstextgroesse - zwischen zwei Zeilen in 13.5px. */
#order-standard_cart #frmCheckout .marketing-email-optin {
    margin: 18px 0 !important;
}

#order-standard_cart #frmCheckout .marketing-email-optin h4 {
    margin: 0 0 4px !important;
}

#order-standard_cart #frmCheckout .marketing-email-optin p {
    margin: 0 0 8px !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Schalter und Name nebeneinander - "#order-standard_cart label
   { display: block }" aus custom.css hat den Schalter sonst ueber den
   Namen gesetzt, jede Zahlungsart also auf zwei Zeilen. */
#order-standard_cart #frmCheckout .radio-inline,
#order-standard_cart #frmCheckout .checkbox-inline,
#order-standard_cart #frmCheckout label.radio {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 10px 8px 0 !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
}

#order-standard_cart #frmCheckout .radio-inline input[type="radio"],
#order-standard_cart #frmCheckout .checkbox-inline input[type="checkbox"],
#order-standard_cart #frmCheckout label.radio input[type="radio"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* --- 8.9  Passwort sichtbar machen ---------------------------------- */

/* Auf der Registrierung (clientregister.tpl) und beim Anmelden
   (login.tpl) steht in jedem Passwortfeld ein Auge zum Aufdecken. Im
   Checkout fehlte es - dort kommt das Markup aus der Vorlage des
   Bestellformulars, die nicht zu diesem Theme gehoert. Den Knopf setzt
   deshalb initPasswordReveal() in footer.tpl nachtraeglich ein; er
   traegt dieselbe Klasse .btn-reveal-pw wie auf den beiden anderen
   Seiten, damit es ein Bedienelement bleibt und nicht zwei.

   Die Huelle bekommt hier .hz-pw-field und NICHT .password-field, das
   auf der Registrierung dieselbe Aufgabe hat: an .password-field
   haengen in custom.css das Auge links (left: 10px) und ein
   "padding-left: 52px !important" am Feld. Beides gilt dort dem
   Registrierungsformular, hier stuende die Sperre-Vorn im Weg -
   zwei Zeichen auf demselben Platz. */
#order-standard_cart #frmCheckout .hz-pw-field {
    position: relative !important;
}

/* Der Knopf liegt am Zeilenende und dreht in der arabischen Fassung
   mit - anders als die Flagge in 8.4 gehoert er diesem Theme, es gibt
   also nichts, wogegen er sich ausrichten muesste.

   inset-inline-start: auto raeumt das "left: 12px" (bzw. "right") aus
   custom.css weg; ohne das stuenden bei einer der beiden Richtungen
   zwei Angaben zugleich. */
#order-standard_cart #frmCheckout .hz-pw-field .btn-reveal-pw {
    position: absolute !important;
    inset-inline-end: 6px !important;
    inset-inline-start: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hz-muted) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    transition: background-color var(--hz-dur-fast) ease, color var(--hz-dur-fast) ease !important;
}

#order-standard_cart #frmCheckout .hz-pw-field .btn-reveal-pw i {
    font-size: var(--hz-fs-small) !important;
    line-height: 1 !important;
}

/* Hover faerbt nur - Groesse und Lage bleiben. */
#order-standard_cart #frmCheckout .hz-pw-field .btn-reveal-pw:hover {
    background: #f1f4f9 !important;
    color: var(--hz-dom-red) !important;
}

#order-standard_cart #frmCheckout .hz-pw-field .btn-reveal-pw:focus-visible {
    outline: 2px solid var(--hz-dom-red) !important;
    outline-offset: 1px !important;
}

/* Der Platz dafuer im Feld. 8.1 setzt "padding-inline: 12px" fuer alle
   Felder; hier stuende der Text sonst unter dem Auge. */
#order-standard_cart #frmCheckout .hz-pw-field .field,
#order-standard_cart #frmCheckout .hz-pw-field .form-control {
    padding-inline-end: 44px !important;
}

/* =====================================================================
   9) STEUERRECHNER IM WARENKORB  (Reiter "Estimate Taxes")
   ---------------------------------------------------------------------
   Der Reiter liegt auf cart.php?a=view und den Folgeseiten in der
   Spalte unter den Warenkorbzeilen. Seine Groessen - 42px hohe Felder,
   14px Schrift, kompakte Abstaende - stehen in custom.css [60.3] und
   bleiben unveraendert.

   Was fehlte, war das Land: es war das letzte native <select> im
   Bestellvorgang. custom.css hat ihm zwar einen eigenen Pfeil gegeben,
   die aufgeklappte LISTE zeichnete aber weiter das Betriebssystem -
   weisser Kasten ueber die halbe Fensterhoehe, blaue Markierung, und
   je nach Platz klappte sie nach oben auf. Neben der Laenderauswahl im
   Checkout, die drei Klicks weiter dieselbe Aufgabe hat, sah das aus
   wie ein Feld aus einem anderen Programm.

   footer.tpl baut es jetzt zur selben Bauart um wie ueberall sonst
   (.hz-select, Abschnitt 1b). Von dort kommen Rahmen, Farben, Pfeil
   und das Verhalten der Liste; hier stehen nur die drei Abweichungen:

     - der Knopf traegt die Masse des Nachbarfeldes (42px/11px/14px)
       statt der 44px/12px/14.5px aus der Domainsuche,
     - die Liste steht buendig unter dem Knopf und ist so breit wie er
       (die 220px-Deckelung aus 1b passt zu ".de", nicht zu
       "South Georgia And Sandwich Isl."),
     - sie ist niedriger als sonst: 196px statt 264px, also gut sechs
       Zeilen. Der Reiter steht weit unten auf der Seite; eine hohe
       Liste reicht dort ueber den Fensterrand hinaus.
   =====================================================================
*/

/* Die Liste haengt absolut unter dem Knopf und damit ausserhalb des
   Reiterblattes. Jedes overflow:hidden auf dem Weg dorthin wuerde sie
   abschneiden - die runden Ecken des Blattes brauchen keins, die Kante
   liegt am Rahmen, nicht am Inhalt. */
#order-standard_cart .view-cart-tabs,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart #calcTaxes,
#order-standard_cart #calcTaxes form,
#order-standard_cart #calcTaxes .form-group,
#order-standard_cart #calcTaxes .row,
#order-standard_cart #calcTaxes [class*="col-"] {
    overflow: visible !important;
}

/* Die Huelle nimmt die volle Spaltenbreite ein - wie das <select>
   vorher auch, damit sich an der Anordnung nichts aendert. */
#order-standard_cart #calcTaxes .hz-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* Der Knopf steht direkt ueber dem Bundesland-Textfeld. Dessen Masse
   kommen aus custom.css [60.3]; stuenden hier die 44px aus der
   Domainsuche, waeren die zwei Felder des Reiters unterschiedlich
   hoch. */
#order-standard_cart #calcTaxes .hz-select__btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-semibold) !important;
}

/* Niedriger als sonst - der Reiter ist ein schmaler Kasten unter dem
   Warenkorb. Lage und Breite kommen aus 1b. */
#order-standard_cart #calcTaxes .hz-select__list {
    max-height: 196px !important;
    padding: 5px !important;
    border-radius: var(--hz-radius) !important;
}

/* Laendernamen sind lang und die Liste ist nur so breit wie das Feld -
   sie duerfen umbrechen statt seitlich abgeschnitten zu werden.

   14px ist die Schrift des Knopfes, 5px Listen- plus 9px Zeilenpolster
   sind seine 14px Einrueckung. */
#order-standard_cart #calcTaxes .hz-select__opt {
    padding: 6px 9px !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-semibold) !important;
    white-space: normal !important;
}

/* Bis das Skript greift - und falls es ausfaellt - steht hier noch das
   echte <select> mit dem Aussehen aus custom.css [60.3]. Das :not() ist
   Pflicht, sonst holt diese Regel die auf 1px zusammengezogenen
   Datenhalter zurueck. */
#order-standard_cart #calcTaxes select:not([data-hz-enhanced]) {
    display: block !important;
    width: 100% !important;
}

/* =====================================================================
   10) NAVIGATION AUF SCHMALEN SCHIRMEN  (.sidebar-collapsed)
   ---------------------------------------------------------------------
   Unter der Sidebar-Schwelle (1199px) blendet das Bestellformular die
   beiden Seitenleisten-Kaesten aus und stellt an ihre Stelle den Block
   .sidebar-collapsed: dieselbe Navigation, nur als Auswahlliste
   ("- Choose Another Category -"), dazu die Waehrungsauswahl.

   Erste Fassung: zwei Kaesten untereinander, je Ueberschrift plus 44px
   hohes Feld. Das waren zusammen rund 200px ueber dem eigentlichen
   Inhalt, und die Kaesten sahen aus wie Hauptelemente der Seite statt
   wie eine Navigation.

   Jetzt: zwei Knoepfe nebeneinander - "Categories v" und "Actions v".
   Jeder Kasten ist nur noch so hoch wie ein Knopf. Die Ueberschrift ist
   die Beschriftung, das gestaltete Auswahlfeld (.hz-select, footer.tpl)
   liegt unsichtbar ueber dem ganzen Kasten und oeffnet beim Antippen
   seine Liste.

   Den aktuellen Wert zeigt der Knopf dafuer nicht mehr. Er ist hier
   ohne Aussage: bei "Categories" steht der Platzhalter "- Choose
   Another Category -", bei "Actions" die Seite, auf der man ohnehin
   ist. In der aufgeklappten Liste bleibt er markiert. Neben der
   Ueberschrift haette er auch keinen Platz: "- Choose Another
   Category -" braucht allein mehr als die halbe Handybreite.

   Die Beschriftung des Auswahlfeldes bleibt im Knopf stehen und wird
   nur durchsichtig - so hat der Knopf fuer Screenreader weiter einen
   Namen.
   ===================================================================== */

/* Nur unterhalb der Schwelle: das Bestellformular blendet den Block
   darueber mit display: none aus, und ein display: grid !important
   ausserhalb der Abfrage holte ihn auf dem Desktop zurueck.

   Hoechstens 240px je Knopf - auf dem Tablet stuenden sonst zwei halbe
   Bildschirmbreiten als Balken nebeneinander. */
@media (max-width: 1199px) {
    #order-standard_cart .sidebar-collapsed {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 240px)) !important;
        gap: 8px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    /* Der Clearfix des Bestellformulars waere im Raster eine eigene,
       leere Zelle. */
    #order-standard_cart .sidebar-collapsed::after {
        content: none !important;
        display: none !important;
    }
}

/* overflow: visible - die Liste haengt unter dem Kasten und wuerde
   sonst von ihm abgeschnitten ([30.6] setzt hidden auf jede Karte). */
#order-standard_cart .sidebar-collapsed .panel,
#order-standard_cart .sidebar-collapsed .card {
    position: relative !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--hz-dom-border) !important;
    background: #ffffff !important;
    overflow: visible !important;
}

/* Rechts 34px frei fuer den Pfeil des Auswahlfeldes darueber. */
#order-standard_cart .sidebar-collapsed .panel-heading,
#order-standard_cart .sidebar-collapsed .card-header {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 !important;
    padding-inline: 12px 34px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: transparent !important;
}

#order-standard_cart .sidebar-collapsed .panel-title,
#order-standard_cart .sidebar-collapsed .card-title {
    overflow: hidden !important;
    margin: 0 !important;
    color: var(--hz-dom-text) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#order-standard_cart .sidebar-collapsed .panel-title i,
#order-standard_cart .sidebar-collapsed .card-title i {
    color: var(--hz-dom-red) !important;
    font-size: var(--hz-fs-mini) !important;
}

/* Das Auswahlfeld deckt den Kasten samt Rahmen ab (-1px): so liegt der
   Rahmen des Knopfes genau auf dem des Kastens, und Hover- und
   Fokusfarbe aus 1b faerben die sichtbare Kante statt einer zweiten
   Linie innen. */
#order-standard_cart .sidebar-collapsed .panel-body,
#order-standard_cart .sidebar-collapsed .card-body {
    position: absolute !important;
    inset: -1px !important;
    padding: 0 !important;
}

#order-standard_cart .sidebar-collapsed form,
#order-standard_cart .sidebar-collapsed .hz-select {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

#order-standard_cart .sidebar-collapsed .hz-select__btn {
    justify-content: flex-end !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* Die Regel darueber kommt nach 1b und nimmt dem Hover sonst die
   Randfarbe und dem Fokus den roten Rand - beide hier zurueck. */
#order-standard_cart .sidebar-collapsed .hz-select__btn:hover {
    border-color: var(--hz-line-strong) !important;
}

#order-standard_cart .sidebar-collapsed .hz-select__btn:focus,
#order-standard_cart .sidebar-collapsed .hz-select.is-open .hz-select__btn {
    border-color: var(--hz-dom-red) !important;
}

#order-standard_cart .sidebar-collapsed .hz-select__label {
    flex: 1 1 auto !important;
    width: 0 !important;
    color: transparent !important;
    user-select: none !important;
}

/* Die Listen sind breiter als ein halber Handybildschirm ("Register a
   New Domain"). Die Liste des rechten Knopfes waechst deshalb von
   dessen hinterer Kante aus nach innen statt ueber den Rand hinaus. */
#order-standard_cart .sidebar-collapsed .hz-select__list {
    min-width: 220px !important;
    max-width: calc(100vw - 32px) !important;
}

#order-standard_cart .sidebar-collapsed > .card:nth-child(2) .hz-select__list,
#order-standard_cart .sidebar-collapsed > .panel:nth-child(2) .hz-select__list {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
}

#order-standard_cart .sidebar-collapsed .hz-select__opt {
    font-size: var(--hz-fs-control) !important;
}

/* Falls das Skript nicht laeuft: das echte <select> liegt unsichtbar
   ueber dem Kasten, und das Antippen oeffnet die Liste des Systems. */
#order-standard_cart .sidebar-collapsed select:not([data-hz-enhanced]) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Die Waehrungsauswahl unter den beiden Kaesten ausblenden - die
   Waehrung haengt an der Sprache (custom.css, "Choose Currency").

   Die Regel in custom.css allein reicht hier nicht: diese hier ist
   spezifischer, kommt spaeter und hatte den Container frueher mit
   display: block !important wieder eingeblendet, damit er nicht neben
   den Kaesten floatet. Dazu packt footer.tpl das <select> in ein
   .hz-select, und dessen Knopf blieb sichtbar, obwohl das <select>
   selbst versteckt war. Deshalb faellt hier der ganze Container weg. */
#order-standard_cart .sidebar-collapsed > .pull-right,
#order-standard_cart .sidebar-collapsed > .float-right {
    display: none !important;
}

/* =====================================================================
   11) SUCHERGEBNIS: ENDUNGEN ALS ZEILEN, KEINE WELTKUGEL
   ---------------------------------------------------------------------
   Vorher standen die acht Endungen als hohe Karten in vier Spalten:
   oben ein blaues Weltkugel-Symbol, darunter mittig die Endung, darunter
   der Preis, darunter der Knopf - vier gestapelte Zeilen fuer zwei
   Angaben.

   Jetzt ist jede Karte eine Zeile: links der Name, rechts Preis und
   Knopf. Damit lesen sich die drei Bloecke der Seite gleich -
   Ergebniszeile, Endungen und Vorschlagsliste sind alle Zeilen mit dem
   Namen links und dem Preis rechts.

   Das Weltkugel-Symbol faellt weg. Es steht auf jeder Karte und in jeder
   Vorschlagszeile dasselbe und unterscheidet damit nichts; ohne es
   beginnt die Zeile beim Namen.

   Zwei Spalten statt vier: eine Zeile braucht Breite fuer Name, Preis
   und Knopf nebeneinander - eine Viertelspalte (rund 190px) reicht dafuer
   nicht, und fuer "Contact Support to Purchase" bei den .sy-Endungen
   erst recht nicht. Unter 768px bleibt eine Spalte.

   Gilt fuer beide Seiten mit Kartenblock (Domain-Registrierung und
   Domain-Schritt der Produkt-Bestellung, siehe 3 und 3b).
   ===================================================================== */

#order-standard_cart #spotlightTlds .spotlight-tlds-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

/* Aus der stehenden Karte wird eine liegende Zeile. Die Mindesthoehe
   von 152px faellt weg, das obere Polster von 34px ebenfalls - es hielt
   den Platz fuer die Plakette frei, die jetzt in der Zeile steht. */
#order-standard_cart #spotlightTlds .spotlight-tld {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 8px 10px 8px 14px !important;
    text-align: start !important;
}

/* Die Kopfzeile der Karte enthielt Symbol und Plakette. Sie wird als
   Kasten aufgeloest (display:contents), damit ihre Kinder unmittelbar
   in der Zeile liegen. Der Unterschied zu "Kasten behalten und leeren":
   ein leerer Kasten waere weiterhin ein Element der Zeile und wuerde bei
   den Endungen ohne Plakette (.net, .de) eine Luecke von einer Gap-
   Breite hinterlassen. */
#order-standard_cart #spotlightTlds .custom-card-top {
    display: contents !important;
}

#order-standard_cart #spotlightTlds .custom-domain-icon {
    display: none !important;
}

/* Die Plakette sass absolut in der oberen Ecke - dort, wo jetzt Preis
   und Knopf stehen. Sie steht wieder im Fluss, direkt hinter dem Namen.
   Die Mindestbreite von 78px stammt aus der stehenden Karte (dort
   sassen "New" und "Hot" sonst verschieden weit in der Ecke) und ist in
   der Zeile nur eine Luecke. */
#order-standard_cart #spotlightTlds .spotlight-tld-new,
#order-standard_cart #spotlightTlds .spotlight-tld-hot {
    position: static !important;
    order: 2 !important;
    flex: 0 0 auto !important;
}

#order-standard_cart #spotlightTlds .custom-domain-badge {
    min-width: 0 !important;
}

/* Die Karte vererbt word-break:break-all - in der stehenden Karte war
   das fuer lange Endungen gedacht, in der Zeile brach es ".com.sy" auf
   zwei Zeilen um, sobald der Knopf daneben eng wurde. Der Name gibt
   nichts mehr her (flex: 0 0 auto); Platz nimmt sich der Support-Knopf
   weiter unten, der dafuer umbrechen darf. */
#order-standard_cart #spotlightTlds .custom-domain-name {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 16px !important;
    text-align: start !important;
    word-break: normal !important;
    white-space: nowrap !important;
}

/* Ergebnisblock und Laeufer an den rechten Rand. margin-inline-start
   statt margin-left: die Seite gibt es auch auf Arabisch, dort ist
   "hinten" die linke Seite. */
#order-standard_cart #spotlightTlds .domain-lookup-spotlight-loader:not([style*='display: none']) {
    order: 3 !important;
    width: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result:not([style*='display: none']),
#order-standard_cart #spotlightTlds .spotlight-tld.has-result .domain-lookup-result {
    order: 3 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
}

/* Preis-Plaketten: nicht mehr ueber die ganze Kartenbreite, sondern nur
   so breit wie der Betrag. Die drei Selektoren sind dieselben wie in 3)
   und 3b) - gleiche Gewichtung, spaeter in der Datei, also gewinnen
   sie. */
#order-standard_cart #spotlightTlds .domain-lookup-result .price:not([style*='display: none']),
#order-standard_cart #spotlightTlds .spotlight-tld.is-available .custom-domain-price,
#order-standard_cart #spotlightTlds .spotlight-tld.is-unknown .custom-domain-price {
    width: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
}

#order-standard_cart #spotlightTlds .domain-lookup-result .btn {
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 1 !important;
}

/* Der Add-Knopf traegt nur noch den Warenkorb. Die Beschriftung bleibt
   im Markup stehen und wird nur auf Schriftgroesse 0 gesetzt - so liest
   ein Screenreader weiterhin "Add" vor.

   Keine feste Breite, sondern nur eine Mindestbreite: nach dem Klick
   tauscht WHMCS den Inhalt gegen "Checkout" aus, und dafuer muss der
   Knopf wachsen duerfen. */
#order-standard_cart #spotlightTlds .custom-domain-btn-add {
    min-width: 34px !important;
    padding: 0 10px !important;
}

#order-standard_cart #spotlightTlds .custom-domain-btn-add .to-add {
    font-size: 0 !important;
}

#order-standard_cart #spotlightTlds .custom-domain-btn-add .to-add i {
    margin: 0 !important;
    font-size: var(--hz-fs-control) !important;
}

/* "Contact Support to Purchase" bleibt beschriftet - er kauft nichts,
   sondern fuehrt zum Support; als blosses Symbol waere er nicht zu
   erraten. Auf einer Zeile ist er 234px breit und passt damit nicht
   neben Name und Preis, deshalb die Obergrenze und der Umbruch auf zwei
   Zeilen.

   min-width:0 ist dabei das Entscheidende: ein Element in einer
   flex-Reihe hat von sich aus min-width:auto, also mindestens die
   Breite seines laengsten unteilbaren Inhalts - und das schlaegt jede
   max-width. Ohne diese Zeile blieb der Knopf 234px breit und schob
   sich ueber den Rand der Karte hinaus.

   height:auto, weil die Regel fuer .btn oben eine feste Hoehe setzt;
   auf zwei Zeilen waere die Beschriftung darin abgeschnitten. */
#order-standard_cart #spotlightTlds .domain-lookup-result .domain-contact-support {
    min-width: 0 !important;
    max-width: 190px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

/* Die Regel in 3) setzt hier zwei Spalten; diese steht spaeter in der
   Datei und gewinnt daher auch innerhalb des Medienblocks. */
@media (max-width: 767px) {
    #order-standard_cart #spotlightTlds .spotlight-tlds-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

}

/* Neben Name und Preis bleiben auf schmalen Schirmen keine 100px mehr
   fuer "Contact Support to Purchase" - die Beschriftung stand dort auf
   drei Zeilen. Mit wrap darf der Ergebnisblock als Ganzes unter den
   Namen rutschen und hat dann die volle Breite der Karte.

   Das greift nur, wenn es wirklich eng wird: flexbox bricht erst um,
   wenn ein Element nicht mehr auf die Zeile passt. Die Endungen mit
   Preis und Symbolknopf bleiben auf einer Zeile.

   Die Grenze liegt hoeher als die des Rasters (768px): zwischen 768 und
   991px stehen zwei Spalten nebeneinander, jede also nur rund 313px
   breit - dort wird es genauso eng wie auf dem Handy in einer Spalte. */
@media (max-width: 991px) {
    #order-standard_cart #spotlightTlds .spotlight-tld {
        flex-wrap: wrap !important;
    }

    #order-standard_cart #spotlightTlds .domain-lookup-result:not([style*='display: none']),
    #order-standard_cart #spotlightTlds .spotlight-tld.has-result .domain-lookup-result {
        flex: 0 0 auto !important;
    }
}

/* ---------------------------------------------------------------------
   11b) VORSCHLAGSLISTE

   Die Zeilen stehen bereits richtig (Name links, Preis und Knopf
   rechts). Hier faellt nur dasselbe Weltkugel-Symbol weg - es kommt aus
   custom.css als ::before der Zeile - und der Knopf wird derselbe
   Warenkorb wie oben.
   --------------------------------------------------------------------- */
#order-standard_cart #domainSuggestions .domain-suggestion::before {
    content: none !important;
    display: none !important;
}

/* Das Symbol steckt hier im ::before der Beschriftung, nicht in einem
   <i> wie oben. Es braucht deshalb seine Schriftgroesse zurueck,
   nachdem die Beschriftung auf 0 gesetzt wurde, und keinen Abstand mehr
   zu einem Text, den es nicht mehr gibt. */
#order-standard_cart #domainSuggestions .btn-add-to-cart {
    min-width: 0 !important;
    padding: 0 13px !important;
}

#order-standard_cart #domainSuggestions .btn-add-to-cart .to-add {
    font-size: 0 !important;
}

#order-standard_cart #domainSuggestions .btn-add-to-cart .to-add::before {
    margin: 0 !important;
    font-size: var(--hz-fs-body) !important;
}

/* Unter 992px legt ui-scale.css Preis und Knopf als eigene Zeile unter
   den Namen; unter 561px stellt custom.css beide zusaetzlich
   untereinander. Zwei volle Balken - einer davon mit einem Symbol in
   der Mitte - sind auf einem Handy die halbe Zeile fuer nichts.

   Sie stehen wieder nebeneinander: die Breite geht an den Preis, der
   Knopf bleibt so breit wie sein Symbol. */
@media (max-width: 991px) {
    #order-standard_cart #domainSuggestions .actions {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #order-standard_cart #domainSuggestions .btn-add-to-cart {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* ---------------------------------------------------------------------
   11c) KEIN HINEINZOOMEN AUF DER PRODUKTSEITE

   Warum ueberhaupt: siehe ui-scale.css (9). Kurz - Safari auf dem
   iPhone zoomt beim Antippen jedes Feldes hinein, dessen Schrift unter
   16px liegt, und zoomt beim Verlassen nicht zurueck.

   Das Sicherheitsnetz dort kommt gegen diese Regeln nicht an: sie tragen
   eine ID. Betroffen sind das Domainfeld und die Endungsauswahl im
   Bestellschritt "Choose a Domain" (#registersld, #registertld) aus 1)
   sowie die beiden Auswahlfelder der eingeklappten Seitenleiste aus 10) -
   alle mit 14.5px.

   Die Auswahlfelder sind mit aufgefuehrt, obwohl iOS bei ihnen statt der
   Tastatur eine Auswahlrolle aufzieht: aeltere Fassungen zoomen auch
   dabei, und 16px kosten in einem 44px hohen Feld nichts.

   Nur bei grobem Zeiger, am Schreibtisch bleiben die 14.5px.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
    #order-standard_cart .domain-input-group .form-control,
    #order-standard_cart .domain-input-group input[type="text"],
    #order-standard_cart .domain-input-group select,
    #order-standard_cart .sidebar-collapsed select,
    #order-standard_cart .sidebar-collapsed .form-control {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------------------
   12a) SUCHZEILE DER DOMAIN-REGISTRIERUNG - nur Handy

   Auf dem Handy stand die Suche in einem dunklen Kasten mit zwei
   schwebenden Kreisen (custom.css), darin ein weisser Kasten, darin Feld
   und Knopf - drei Rahmen umeinander, 56px hohe Felder, zusammen ueber
   200px Hoehe fuer ein Feld und einen Knopf. In der Produkt-Bestellung
   stehen Feld und Knopf ohne jede Huelle direkt auf der Seite.

   Am Schreibtisch bleibt der Kasten: dort steht die Suche als Kopf ueber
   den Preiskarten und hat den Platz dafuer.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    #order-standard_cart.domain-register-modern .domain-checker-container {
        overflow: visible !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    #order-standard_cart.domain-register-modern .domain-checker-container::before,
    #order-standard_cart.domain-register-modern .domain-checker-container::after {
        content: none !important;
        display: none !important;
    }

    #order-standard_cart.domain-register-modern .domain-checker-bg {
        padding: 0 !important;
        background: none !important;
    }

    /* Das Raster (col-10 offset-1) rueckte die Suche von beiden Seiten
       ein; sie steht jetzt auf derselben Kante wie Ergebniszeile und
       Vorschlagsliste darunter. */
    #order-standard_cart.domain-register-modern #frmDomainChecker .row {
        margin: 0 !important;
    }

    #order-standard_cart.domain-register-modern #frmDomainChecker .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Feld und Knopf untereinander, 8px Abstand - wie Suchzeile und
       Knopf in Abschnitt 1. */
    #order-standard_cart.domain-register-modern .input-group-box,
    #order-standard_cart.domain-register-modern .input-group-box:focus-within {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #order-standard_cart.domain-register-modern #inputDomain {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid var(--hz-dom-border) !important;
        border-radius: var(--hz-radius) !important;
        background: #ffffff !important;
        color: var(--hz-dom-text) !important;
        font-size: var(--hz-fs-control) !important;
        line-height: 1.2 !important;
        box-shadow: none !important;
    }

    #order-standard_cart.domain-register-modern #inputDomain:focus {
        border-color: var(--hz-dom-red) !important;
        box-shadow: 0 0 0 3px rgb(var(--hz-primary-rgb) / .10) !important;
    }

    #order-standard_cart.domain-register-modern .input-group-box .input-group-btn,
    #order-standard_cart.domain-register-modern .input-group-box .input-group-append {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #order-standard_cart.domain-register-modern #btnCheckAvailability {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 22px !important;
        border: 0 !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-dom-red) !important;
        color: #ffffff !important;
        font-size: var(--hz-fs-control) !important;
        font-weight: var(--hz-fw-bold) !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    /* Hover faerbt nur - Groesse und Lage bleiben. */
    #order-standard_cart.domain-register-modern #btnCheckAvailability:hover,
    #order-standard_cart.domain-register-modern #btnCheckAvailability:focus {
        background: var(--hz-primary-hover) !important;
        box-shadow: none !important;
    }
}

/* Die Regel oben traegt zwei IDs und setzt 14.5px - das schlaegt das
   16px-Sicherheitsnetz in ui-scale.css (9). Ohne diese Zeile zoomt
   Safari beim Antippen des Feldes wieder hinein. */
@media (max-width: 767px) and (pointer: coarse) {
    #order-standard_cart.domain-register-modern #inputDomain {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------------------
   12b) EXACT MATCH DER DOMAIN-REGISTRIERUNG

   Hier stand eine eigene Fassung (ui-scale.css 10): anderer Rahmen,
   kleinerer Radius, Preis mit gruenem Verlauf und Rahmen - und vor
   allem Preis und Knopf in einem gemeinsamen <p class="domain-price">.
   Auf dem Handy war die Zeile damit zu schmal fuer beide: der Preis
   brach auf zwei Zeilen um ("$12.99 / USD"), der Knopf klebte daneben.

   Die Bauart ist jetzt die der Produkt-Bestellung. Der Kniff dafuer ist
   display:contents am <p>: der Absatz bleibt im Markup, zeichnet aber
   keinen Kasten mehr, und Preis und Knopf werden unmittelbar Teil der
   Ergebniszeile. Damit gelten fuer sie dieselben Reihenfolge- und
   Umbruchregeln wie drueben fuer Preis und "Weiter": Text, Preis rechts
   daneben, Knopf dahinter - und auf dem Handy der Knopf in voller Breite
   darunter.

   Die Sichtbarkeit steuert WHMCS am <p> per inline-style. Die Regel
   nimmt den ausgeblendeten Zustand deshalb aus (siehe Kopf der Datei);
   ein ausgeblendetes <p> blendet auch mit display:contents seine Kinder
   nicht ein, weil die Regel dann gar nicht greift.
   --------------------------------------------------------------------- */
#order-standard_cart.domain-register-modern #primaryLookupResult[style*="display: block"],
#order-standard_cart.domain-register-modern #primaryLookupResult[style*="display: flex"] {
    gap: 12px !important;
    padding: 12px 14px 12px 18px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    text-align: start !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-available,
#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-unavailable,
#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-tld-unavailable {
    order: 1 !important;
    flex: 1 1 200px !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.35 !important;
    text-align: start !important;
}

/* Die Farbe steht in Abschnitt 2 schon, verlor hier aber gegen eine
   Regel mit Elementselektor: "ist verfuegbar." stand dunkelgrau hinter
   dem gruenen Domainnamen. Drueben ist der ganze Satz gruen. */
#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-available {
    color: var(--hz-dom-green) !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-unavailable,
#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-tld-unavailable {
    color: var(--hz-dom-red) !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult > p.domain-price:not([style*="display: none"]) {
    display: contents !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult .domain-price .price {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult .domain-price .btn-add-to-cart {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-red) !important;
    color: #ffffff !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult .domain-price .btn-add-to-cart:hover,
#order-standard_cart.domain-register-modern #primaryLookupResult .domain-price .btn-add-to-cart:focus {
    background: var(--hz-primary-hover) !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   12c) VORSCHLAGSLISTE - jede Zeile gebaut wie der Exact Match

   Beide Seiten, alle Breiten. Vorher war jede Vorschlagszeile eine eigene
   Bauart: Name schwarz mit roter Endung, darunter ein Preisbalken ueber
   die ganze Breite und daneben ein Knopf nur mit Warenkorb-Symbol. Direkt
   darueber stand der Exact Match - dieselbe Aussage ("diese Domain ist
   frei, so viel kostet sie"), aber in ganz anderer Gestalt.

   Jetzt ist jede Vorschlagszeile ein Exact Match ohne den Zusatz "ist
   verfuegbar": Name gruen und fett, Preis-Plakette rechts daneben, der
   Knopf dahinter - auf dem Handy in voller Breite darunter, beschriftet
   statt nur mit Symbol.

   Wie in 12b loest display:contents die Huelle .actions auf, damit Preis
   und Knopf in der Zeile selbst stehen. Name und Endung sind dort zwei
   eigene Elemente; ein gap zwischen allen Elementen wuerde ".com" vom
   Namen abruecken. Der Spaltenabstand ist deshalb 0, Abstand halten
   gezielt die Endung (nach hinten) und der Knopf (nach vorn).

   Nicht angefasst wird "display" der Zeile selbst: custom.css blendet
   damit die leere Vorlagenzeile aus (.w-hidden:not(.clone)) - eine Regel
   mit zwei IDs wuerde sie wieder einblenden.
   --------------------------------------------------------------------- */
#order-standard_cart #domainSuggestions .domain-suggestion {
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
    min-height: 0 !important;
    margin-bottom: 10px !important;
    padding: 12px 14px 12px 18px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    text-align: start !important;
    transition: none !important;
}

/* Eine Zeile ist kein Knopf: kein Hover an der Zeile. Die Regeln in
   custom.css und ui-scale.css faerbten Rahmen, Schatten und den Namen
   beim Ueberfahren um. */
#order-standard_cart #domainSuggestions .domain-suggestion:hover {
    border-color: var(--hz-dom-border) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    transform: none !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion:last-child {
    margin-bottom: 0 !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .domain,
#order-standard_cart #domainSuggestions .domain-suggestion .extension,
#order-standard_cart #domainSuggestions .domain-suggestion:hover .domain,
#order-standard_cart #domainSuggestions .domain-suggestion:hover .extension {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--hz-dom-green) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .extension {
    margin-inline-end: 12px !important;
}

/* Die Plakette ("Angesagt"/"Neu") bleibt beim Namen. Ohne eigene
   Reihenfolge stuende sie vor ihm: in der Produkt-Bestellung liegt sie
   in .actions, und das hat jetzt keine eigene Reihenfolge mehr. */
#order-standard_cart #domainSuggestions .domain-suggestion .promo {
    order: 1 !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions {
    display: contents !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions .price,
#order-standard_cart #domainSuggestions .domain-suggestion:hover .actions .price {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    white-space: nowrap !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions .btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    margin-inline-start: 8px !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart {
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    /* Hoehe, Breite und Innenabstand stehen in components.css (Ebene). */
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-red) !important;
    color: #ffffff !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background-color var(--hz-dur-fast) ease !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart:hover,
#order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart:focus {
    background: var(--hz-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Beschriftung statt Symbol - wie "Weiter" und "In den Warenkorb" im
   Exact Match. 11b hatte sie auf Schriftgroesse 0 gesetzt und nur das
   Warenkorb-Symbol aus custom.css stehen lassen. */
#order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart .to-add {
    font-size: var(--hz-fs-small) !important;
    line-height: 1 !important;
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart .to-add::before {
    content: none !important;
    display: none !important;
}

/* Auf dem Handy nur das Warenkorb-Symbol - so passt der Knopf neben Name
   und Preis in eine Zeile. Die Beschriftung bleibt im Markup und steht
   nur auf Schriftgroesse 0, ein Screenreader liest weiter "Add to Cart"
   vor. Das Symbol steckt im ::before (Glyphe wie in custom.css) und
   braucht deshalb eine eigene Schriftgroesse. */
@media (max-width: 767px) {
    #order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart .to-add {
        font-size: 0 !important;
    }

    #order-standard_cart #domainSuggestions .domain-suggestion .actions .btn-add-to-cart .to-add::before {
        content: "\f07a" !important;
        display: inline-block !important;
        margin: 0 !important;
        font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
        font-size: var(--hz-fs-control) !important;
        font-weight: var(--hz-fw-bold) !important;
        line-height: 1 !important;
    }
}

/* Nach dem Klick tauscht WHMCS die Beschriftung per jQuery: "In den
   Warenkorb" aus, "Wird geladen..." und danach "Bezahlen" ein.
   custom.css blendet die beiden letzten aber mit !important dauerhaft
   aus - der Knopf stand nach dem Klick leer da. Solange er nur ein
   Symbol trug, fiel das kaum auf; mit Beschriftung saehe es kaputt aus.

   Eingeblendet wird nur, was WHMCS selbst eingeblendet hat (inline
   display: inline/block) - siehe Kopf der Datei. */
#order-standard_cart #domainSuggestions .btn-add-to-cart .loading[style*="display: inline"],
#order-standard_cart #domainSuggestions .btn-add-to-cart .loading[style*="display: block"],
#order-standard_cart #domainSuggestions .btn-add-to-cart .added[style*="display: inline"],
#order-standard_cart #domainSuggestions .btn-add-to-cart .added[style*="display: block"],
#order-standard_cart #domainSuggestions .btn-add-to-cart .unavailable[style*="display: inline"],
#order-standard_cart #domainSuggestions .btn-add-to-cart .unavailable[style*="display: block"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1 !important;
}

/* Auf dem Handy: der Knopf nimmt eine eigene Zeile in voller Breite -
   wie "Weiter" in der Produkt-Bestellung. Der Warenkorb-Knopf der
   Vorschlagsliste ist nicht mehr dabei: er traegt nur das Symbol und
   bleibt in der Zeile neben dem Preis. */
@media (max-width: 767px) {
    #order-standard_cart #primaryLookupResult > .hz-domain-cta:not([hidden]),
    #order-standard_cart.domain-register-modern #primaryLookupResult .domain-price .btn-add-to-cart {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-inline-start: 0 !important;
    }
}

/* --- 13.1  SSL-Werbeflaeche: Kasten und Kopf ----------------------- */

#order-standard_cart .addon-promo-container {
    margin: 0 0 18px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    text-align: start !important;
}

/* Kopf als Raster: Text links, Bild rechts daneben ueber beide Zeilen.
   Vorher floss der zentrierte Text um ein nach rechts geschobenes Bild
   herum - auf dem Handy standen Ueberschrift und Absatz dadurch
   unterschiedlich weit eingerueckt. */
#order-standard_cart .addon-promo-container .description {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 16px !important;
    align-items: start !important;
    margin: 0 0 12px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--hz-dom-border) !important;
    text-align: start !important;
}

#order-standard_cart .addon-promo-container .logo {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    float: none !important;
    margin: 0 !important;
    line-height: 0 !important;
}

#order-standard_cart .addon-promo-container .logo img {
    width: 52px !important;
    max-width: none !important;
    height: auto !important;
    border-radius: var(--hz-radius) !important;
}

#order-standard_cart .addon-promo-container h3 {
    grid-column: 1 !important;
    margin: 0 0 4px !important;
    color: var(--hz-dom-text) !important;
    text-align: start !important;
}

#order-standard_cart .addon-promo-container .description p {
    grid-column: 1 !important;
    margin: 0 !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.55 !important;
    text-align: start !important;
}

#order-standard_cart .addon-promo-container .description a {
    color: var(--hz-dom-red) !important;
    font-weight: var(--hz-fw-semibold) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Die Zeilenumbrueche zwischen den Labels und die Clearfix-Huelle hinter
   dem Kopf tragen nichts mehr bei - die Abstaende macht das Label. */
#order-standard_cart .addon-promo-container > br,
#order-standard_cart .addon-promo-container > .clearfix {
    display: none !important;
}

/* --- 13.2  SSL-Werbeflaeche: Auswahlzeilen ------------------------- */

/* Raster statt Flex: die erste Spalte ist fest 20px breit und wird
   nicht zusammengedrueckt, der Name bekommt den Rest und bricht
   linksbuendig um, der Preis steht rechts in einer Zeile. */
#order-standard_cart .addon-promo-container .radio-inline {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--hz-radius) !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.35 !important;
    text-align: start !important;
    cursor: pointer !important;
    transition: background-color var(--hz-dur-fast) ease, border-color var(--hz-dur-fast) ease !important;
}

#order-standard_cart .addon-promo-container .radio-inline:last-of-type {
    margin-bottom: 0 !important;
}

/* Hover faerbt nur - Groesse und Lage bleiben, damit die Liste beim
   Ueberfahren nicht wandert. */
#order-standard_cart .addon-promo-container .radio-inline:hover {
    background: var(--hz-bg) !important;
}

/* Die gewaehlte Zeile traegt den Grund des bestellten Pakets oben auf
   der Seite (Abschnitt 7). */
#order-standard_cart .addon-promo-container .radio-inline:has(input:checked) {
    border-color: var(--hz-primary-soft) !important;
    background: var(--hz-primary-soft) !important;
}

#order-standard_cart .addon-promo-container .radio-inline .hz-ssl-name {
    min-width: 0 !important;
}

#order-standard_cart .addon-promo-container .radio-inline .pull-right,
#order-standard_cart .addon-promo-container .radio-inline .float-right {
    float: none !important;
    margin: 0 !important;
    color: var(--hz-dom-text) !important;
    font-weight: var(--hz-fw-bold) !important;
    font-variant-numeric: tabular-nums !important;
    text-align: end !important;
    white-space: nowrap !important;
}

#order-standard_cart .addon-promo-container .radio-inline input[type="radio"] {
    margin: 0 !important;
}

/* Radioknopf in den Farben des Shops. iCheck zeichnet ihn sonst als
   blaues Bild (blue.png) - die einzige blaue Flaeche auf der Seite.
   Gewaehlt: roter Punkt mit weissem Ring. */
#order-standard_cart .addon-promo-container .iradio_square-blue {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 2px solid var(--hz-line-strong) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color var(--hz-dur-fast) ease, background-color var(--hz-dur-fast) ease !important;
}

#order-standard_cart .addon-promo-container .iradio_square-blue.hover {
    border-color: var(--hz-muted) !important;
}

#order-standard_cart .addon-promo-container .iradio_square-blue.checked {
    border-color: var(--hz-dom-red) !important;
    background: var(--hz-dom-red) !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

/* Handy: der Preis rutscht unter den Namen. Neben einem 125px breiten
   Preis ("$1,257.00 USD/3yrs") blieben fuer den Namen auf einem 390px-
   Handy nur rund 150px - "GeoTrust True Business ID Wildcard" stand
   damit auf drei Zeilen. Unter dem Namen hat der Preis die ganze
   Breite, der Name passt in eine Zeile. Der Radioknopf steht mittig
   neben beiden. */
@media (max-width: 575px) {
    #order-standard_cart .addon-promo-container {
        padding: 16px 14px !important;
    }

    #order-standard_cart .addon-promo-container .description {
        column-gap: 12px !important;
    }

    #order-standard_cart .addon-promo-container .logo img {
        width: 42px !important;
    }

    #order-standard_cart .addon-promo-container .description p {
        font-size: var(--hz-fs-small) !important;
    }

    #order-standard_cart .addon-promo-container .radio-inline {
        grid-template-columns: 20px minmax(0, 1fr) !important;
        row-gap: 1px !important;
        padding: 9px 10px !important;
    }

    #order-standard_cart .addon-promo-container .radio-inline > .iradio_square-blue,
    #order-standard_cart .addon-promo-container .radio-inline > input[type="radio"] {
        grid-row: 1 / span 2 !important;
    }

    #order-standard_cart .addon-promo-container .radio-inline .pull-right,
    #order-standard_cart .addon-promo-container .radio-inline .float-right {
        grid-column: 2 !important;
        color: var(--hz-text) !important;
        font-size: var(--hz-fs-small) !important;
        font-weight: var(--hz-fw-bold) !important;
        text-align: start !important;
    }

    /* "None" traegt als Preis nur einen Strich - auf eigener Zeile saehe
       das wie ein Fehler aus. */
    #order-standard_cart .addon-promo-container .radio-inline:first-of-type > .iradio_square-blue,
    #order-standard_cart .addon-promo-container .radio-inline:first-of-type > input[type="radio"] {
        grid-row: auto !important;
    }

    #order-standard_cart .addon-promo-container .radio-inline:first-of-type .pull-right,
    #order-standard_cart .addon-promo-container .radio-inline:first-of-type .float-right {
        display: none !important;
    }
}

/* --- 13.3  Addon-Karten --------------------------------------------- */

/* Gilt auch fuer die Domain-Addons (DNS-Verwaltung, ID-Schutz,
   E-Mail-Weiterleitung) in cart.php?a=confdomains - gleiches Markup.

   Die Spalte wird zur Flex-Huelle, damit nebeneinanderstehende Karten
   gleich hoch sind. */
#order-standard_cart .addon-products > [class*="col-"] {
    display: flex !important;
    margin-bottom: 16px !important;
}

/* Die ganze Karte ist klickbar (standard_cart haengt den Klick an
   .panel-addon) - deshalb Zeiger und Hover-Farbe am Knopf. Umbruch mit
   space-between: Text oben, Preis und Knopf stehen bei ungleich langen
   Texten trotzdem auf gleicher Hoehe am unteren Rand.

   flex-direction muss ausdruecklich stehen: .card bringt aus Bootstrap
   "column" mit. Zusammen mit dem Umbruch legte die Karte Preis und
   Knopf dann als weitere Spalten rechts neben den Text, ausserhalb
   des Kastens. */
#order-standard_cart .panel-addon {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: space-between !important;
    gap: 14px 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid var(--hz-dom-border) !important;
    background: #ffffff !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    text-align: start !important;
    overflow: visible !important;
    cursor: pointer !important;
    transition: border-color var(--hz-dur-fast) ease !important;
}

#order-standard_cart .panel-addon .panel-body {
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--hz-text) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.55 !important;
    text-align: start !important;
}

/* Name des Addons (nur auf der Domain-Seite vorhanden). Das Haekchen
   davor bleibt im Formular, ist aber unsichtbar: den Zustand zeigt der
   Knopf ("Added to Cart (Remove)"). */
#order-standard_cart .panel-addon .panel-body label {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.35 !important;
    cursor: pointer !important;
}

#order-standard_cart .panel-addon .panel-body label .icheckbox_square-blue,
#order-standard_cart .panel-addon .panel-body label input[type="checkbox"],
#order-standard_cart .panel-addon .panel-body > br {
    display: none !important;
}

#order-standard_cart .panel-addon .panel-price {
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-surface-2) !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Der Knopf fuellt den Rest der Zeile neben dem Preis. In der schmalen
   Zweierspalte des PCs (rund 245px je Karte) passt er nicht daneben -
   er rutscht dann in eine eigene Zeile und nimmt sie ganz, statt rechts
   allein darin zu haengen.

   Die Beschriftung darf umbrechen: nach dem Klick steht dort "Added to
   Cart (Remove)", in der schmalen Karte breiter als die Karte selbst. */
#order-standard_cart .panel-addon .panel-add {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-red) !important;
    color: #ffffff !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    transition: background-color var(--hz-dur-fast) ease, color var(--hz-dur-fast) ease !important;
}

#order-standard_cart .panel-addon:hover .panel-add {
    background: var(--hz-primary-hover) !important;
}

/* Hinzugefuegt: gruener Rahmen, der Knopf wird zur gruenen Plakette
   wie der Domainpreis in der Ergebniszeile (Abschnitt 12b). */
#order-standard_cart .panel-addon.panel-addon-selected {
    border-color: rgba(21, 128, 61, .35) !important;
}

#order-standard_cart .panel-addon.panel-addon-selected .panel-add {
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
}

#order-standard_cart .panel-addon.panel-addon-selected:hover .panel-add {
    background: #d5f2df !important;
}

/* Handy: Knopf in voller Breite unter dem Preis - wie in der
   Ergebniszeile und der Vorschlagsliste (Ende Abschnitt 12c). */
@media (max-width: 767px) {
    #order-standard_cart .panel-addon {
        padding: 14px !important;
        gap: 12px 10px !important;
    }

    #order-standard_cart .panel-addon .panel-body {
        font-size: var(--hz-fs-small) !important;
    }

    #order-standard_cart .panel-addon .panel-add {
        flex: 1 1 100% !important;
    }
}

/* =====================================================================
   14) DOMAIN-KONFIGURATION ALS KARTEN  (cart.php?a=confdomains)
   ---------------------------------------------------------------------
   Die Seite bestand aus losem Text auf grauem Grund: Domainname als
   Trennlinie, darunter "Registration Period" und "Hosting" als 15px/800-
   Beschriftungen (custom.css) mit einer Leerzeile, "[Has Hosting]" in
   Klammern und Vorlagen-Gruen, und die Zusatzfelder der Endung als
   Bootstrap-Zeile - auf dem Handy mit der Checkbox allein auf einer
   Zeile unter ihrer Beschriftung.

   footer.tpl (buildDomainConfigCards) fasst jede Domain samt ihren
   Feldern in <div class="hz-dc-card"> zusammen, ebenso den Nameserver-
   Block (.hz-dc-card--ns). Ausserdem setzt es:
     .hz-dc-info    an die Zeile mit Laufzeit und Hosting
     .hz-dc-badge   an "[Has Hosting]" / "[No Hosting! ...]" (ohne
                    Klammern)
     .hz-dc-check   an Zusatzfelder, die nur aus einer Checkbox bestehen
                    - ihre Beschriftung schaltet die Checkbox mit
   ===================================================================== */

#order-standard_cart #frmConfigureDomains > p {
    margin: 0 0 16px !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.55 !important;
}

/* --- 14.1  Karte und Kopfzeile -------------------------------------- */

#order-standard_cart #frmConfigureDomains .hz-dc-card {
    margin: 0 0 16px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
}

/* Die Trennlinie mit dem Namen in der Mitte wird zur Kopfzeile der
   Karte: Symbol, Name, Linie darunter. */
#order-standard_cart #frmConfigureDomains .hz-dc-card > .sub-heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hz-dom-border) !important;
    text-align: start !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card > .sub-heading > i {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-primary-soft) !important;
    color: var(--hz-dom-red) !important;
    font-size: var(--hz-fs-control) !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card > .sub-heading span {
    position: static !important;
    top: auto !important;
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: var(--hz-dom-text) !important;
    font-size: 15.5px !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
}

/* --- 14.2  Laufzeit und Hosting als Kacheln ------------------------- */

#order-standard_cart #frmConfigureDomains .hz-dc-info {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-info > [class*="col-"] {
    flex: 1 1 calc(50% - 5px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Das Feld fuer den EPP-Code (Umzug) steht in derselben Zeile und
   bekommt sie ganz. */
#order-standard_cart #frmConfigureDomains .hz-dc-info > .col-sm-12 {
    flex-basis: 100% !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-info > .col-sm-6 > .form-group {
    height: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-bg) !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.35 !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-info > .col-sm-6 > .form-group > label {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-bold) !important;
    letter-spacing: .3px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-info > .col-sm-6 > .form-group > br {
    display: none !important;
}

/* Die Farben stehen im Template als inline-style (#009900 / #cc0000)
   und brauchen deshalb !important. */
#order-standard_cart #frmConfigureDomains .hz-dc-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-badge i {
    font-size: var(--hz-fs-mini) !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-badge--ok {
    background: var(--hz-dom-green-bg) !important;
    color: var(--hz-dom-green) !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-badge--missing {
    background: var(--hz-primary-soft) !important;
    color: var(--hz-dom-red) !important;
}

#order-standard_cart #frmConfigureDomains a.hz-dc-badge--missing:hover,
#order-standard_cart #frmConfigureDomains a.hz-dc-badge--missing:focus {
    background: #fbd9d9 !important;
}

/* --- 14.3  Zusatzfelder der Endung ---------------------------------- */

/* Jedes Feld als helle Kachel. Grundform: Beschriftung ueber dem Feld
   (Auswahllisten, Textfelder - bei .ca etwa "Legal Type"). */
#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-bg) !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row:last-child {
    margin-bottom: 0 !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: start !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row > .col-sm-4 {
    margin: 0 0 8px !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.4 !important;
}

/* Checkbox-Felder ("Consent to Publish Domain Information"):
   Beschriftung links, Checkbox rechts auf derselben Zeile, der
   Erklaertext darunter ueber die ganze Breite - auf Handy und PC.

   Die Feldspalte wird mit display:contents aufgeloest, damit Checkbox
   und Erklaertext unmittelbar ins Raster fallen. Der Erklaertext traegt
   seine Masse als inline-style aus der Registrar-Einstellung. */
#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row.hz-dc-check {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 14px !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-check > .col-sm-4 {
    margin: 0 !important;
    cursor: pointer !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-check > .col-sm-8 {
    display: contents !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-check > .col-sm-8 > span {
    grid-column: 1 / -1 !important;
    display: block !important;
    max-width: none !important;
    margin: 6px 0 0 !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-check > .col-sm-8 > input[type="checkbox"] {
    margin: 0 !important;
}

/* Checkbox in den Farben des Shops statt des blauen iCheck-Bildes,
   gewaehlt rot mit weissem Haken. */
#order-standard_cart #frmConfigureDomains .icheckbox_square-blue {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 2px solid var(--hz-line-strong) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color var(--hz-dur-fast) ease, background-color var(--hz-dur-fast) ease !important;
}

#order-standard_cart #frmConfigureDomains .icheckbox_square-blue.hover {
    border-color: var(--hz-muted) !important;
}

#order-standard_cart #frmConfigureDomains .icheckbox_square-blue.checked {
    border-color: var(--hz-dom-red) !important;
    background: var(--hz-dom-red) !important;
}

#order-standard_cart #frmConfigureDomains .icheckbox_square-blue.checked::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #ffffff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
}

/* --- 14.4  Nameserver ------------------------------------------------ */

#order-standard_cart #frmConfigureDomains .hz-dc-card--ns > p {
    margin: 0 0 14px !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.55 !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card--ns > .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    margin: 0 !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card--ns > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card--ns .form-group {
    margin: 0 !important;
}

/* Masse wie im Checkout (Abschnitt 8.1 und 8.6): 13px/600 ueber einem
   44px hohen Feld - custom.css setzt sonst 15px/800 ueber 56px. */
#order-standard_cart #frmConfigureDomains .hz-dc-card--ns label {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
}

#order-standard_cart #frmConfigureDomains .hz-dc-card--ns .form-control {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    line-height: 1.4 !important;
}

@media (max-width: 767px) {
    #order-standard_cart #frmConfigureDomains .hz-dc-card {
        padding: 16px 14px !important;
    }

    /* Kacheln nach Inhalt statt je halber Breite: "Has Hosting" passt
       neben die Laufzeit, "No Hosting! Click to Add" (oder eine laengere
       Uebersetzung) nicht - dann bekommt jede Kachel ihre eigene Zeile,
       statt die Plakette in einer halben Kachel zu brechen. */
    #order-standard_cart #frmConfigureDomains .hz-dc-info > [class*="col-"] {
        flex: 1 1 auto !important;
    }

    #order-standard_cart #frmConfigureDomains .hz-dc-info > .col-sm-12 {
        flex-basis: 100% !important;
    }

    /* In Grossbuchstaben war "REGISTRATION PERIOD" auf einem 375px-
       Handy rund 30px zu breit, um neben "Has Hosting" zu passen. */
    #order-standard_cart #frmConfigureDomains .hz-dc-info > .col-sm-6 > .form-group > label {
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    #order-standard_cart #frmConfigureDomains .hz-dc-card--ns > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }
}

/* --- 15.1  Textfelder, Auswahl, Textbereich ------------------------- */

#order-standard_cart #frmConfigureDomains input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]),
#order-standard_cart #frmConfigureDomains select:not([data-hz-enhanced]),
#order-standard_cart #frmConfigureDomains .hz-select__btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.3 !important;
}

#order-standard_cart #frmConfigureDomains textarea {
    height: auto !important;
    min-height: 76px !important;
    padding: 8px 12px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Auswahl: dasselbe Gewicht in Knopf und Liste. 600 aus 1b stand neben
   den 400 der Textfelder und liess die Auswahl groesser wirken. */
#order-standard_cart #frmConfigureDomains .hz-select__btn,
#order-standard_cart #frmConfigureDomains .hz-select__opt {
    font-weight: var(--hz-fw-semibold) !important;
}

#order-standard_cart #frmConfigureDomains .hz-select__opt {
    padding: 6px 8px !important;
    font-size: var(--hz-fs-small) !important;
}

/* --- 15.2  Beschriftungen ------------------------------------------- */

/* Name des Zusatzfeldes (14.3) und der Nameserver (14.4) gleich gross. */
#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row > .col-sm-4,
#order-standard_cart #frmConfigureDomains .hz-dc-card--ns label {
    margin-bottom: 6px !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.4 !important;
}

/* In der Checkbox-Zeile steht die Beschriftung neben dem Kaestchen und
   braucht keinen Abstand nach unten. */
#order-standard_cart #frmConfigureDomains .hz-dc-card > .form-group.row.hz-dc-check > .col-sm-4 {
    margin-bottom: 0 !important;
}

/* Erklaertext, den die Endung als nackten Text hinter das Feld setzt
   (.ca: "Legal type of registrant contact"). Erbte bisher 14px. */
#order-standard_cart #frmConfigureDomains .form-group.row > .col-sm-8 {
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Radio-Felder: jede Option ist ein <label> mit dem Knopf darin -
   custom.css macht daraus 15px/800. Die <br> dazwischen stuenden neben
   den Block-Beschriftungen als eigene Leerzeile. */
#order-standard_cart #frmConfigureDomains .form-group.row > .col-sm-8 label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 6px !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

#order-standard_cart #frmConfigureDomains .form-group.row > .col-sm-8 label:last-of-type {
    margin-bottom: 0 !important;
}

#order-standard_cart #frmConfigureDomains .form-group.row > .col-sm-8 > label + br {
    display: none !important;
}

/* --- 15.3  Checkbox und Radio --------------------------------------- */

/* 18px statt 22px. Der Haken aus 14.3 ist auf 22px gebaut und wird im
   selben Verhaeltnis kleiner (Innenmass 14 statt 18px). */
#order-standard_cart #frmConfigureDomains .icheckbox_square-blue {
    width: 18px !important;
    height: 18px !important;
    border-radius: var(--hz-radius) !important;
}

#order-standard_cart #frmConfigureDomains .icheckbox_square-blue.checked::after {
    top: 1px !important;
    left: 4.5px !important;
    width: 5px !important;
    height: 9px !important;
    border-width: 0 2px 2px 0 !important;
}

/* Radio: dieselbe Bauart rund, statt des blauen iCheck-Bildes. */
#order-standard_cart #frmConfigureDomains .iradio_square-blue {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 2px solid var(--hz-line-strong) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color var(--hz-dur-fast) ease !important;
}

#order-standard_cart #frmConfigureDomains .iradio_square-blue.hover {
    border-color: var(--hz-muted) !important;
}

#order-standard_cart #frmConfigureDomains .iradio_square-blue.checked {
    border-color: var(--hz-dom-red) !important;
}

#order-standard_cart #frmConfigureDomains .iradio_square-blue.checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--hz-dom-red) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

/* Falls iCheck nicht laeuft: das echte Kaestchen in derselben Groesse.
   Innerhalb der iCheck-Huelle nicht - dort ist es die unsichtbare
   Klickflaeche und traegt seine Masse als inline-style. */
#order-standard_cart #frmConfigureDomains input[type="checkbox"]:not(.icheckbox_square-blue > input),
#order-standard_cart #frmConfigureDomains input[type="radio"]:not(.iradio_square-blue > input) {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--hz-dom-red) !important;
}

/* --- 15.4  Fingerbedienung ------------------------------------------ */

@media (pointer: coarse) {
    #order-standard_cart #frmConfigureDomains input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]),
    #order-standard_cart #frmConfigureDomains select:not([data-hz-enhanced]),
    #order-standard_cart #frmConfigureDomains .hz-select__btn {
        height: 40px !important;
        min-height: 40px !important;
    }

    #order-standard_cart #frmConfigureDomains input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]),
    #order-standard_cart #frmConfigureDomains select:not([data-hz-enhanced]),
    #order-standard_cart #frmConfigureDomains textarea {
        font-size: 16px !important;
    }
}

/* custom.css [30.8] gibt ihm 17px bei 14px/30px Innenabstand - 54px
   hoch, neben 38px hohen Feldern das Groesste auf der Seite. Jetzt
   46px/15px wie die Hauptaktion "Checkout" im Warenkorb (16) - eine
   Stufe ueber den 44px/14px der Nebenknoepfe dort.

   Der Schatten steht auch im Hover: custom.css vergroessert ihn dort. */
#order-standard_cart #frmConfigureDomains button[type="submit"],
#order-standard_cart #frmConfigureDomains button[type="submit"]:hover {
    box-shadow: var(--hz-shadow-md) !important;
}

#order-standard_cart #frmConfigureDomains button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: 46px !important;
    padding: 0 26px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.2 !important;
}

#order-standard_cart #frmConfigureDomains button[type="submit"] i {
    font-size: var(--hz-fs-body) !important;
}

/* --- 16.1  Positionen -------------------------------------------------- */

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items-header {
    padding: 11px 18px !important;
    border-radius: var(--hz-radius) var(--hz-radius) 0 0 !important;
    font-size: var(--hz-fs-small) !important;
    letter-spacing: .2px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items {
    margin: 0 0 12px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--hz-radius) var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-md) !important;
}

/* Jede zweite Zeile war grau (Bestellformular). Bei zwei, drei
   Positionen ist das kein Lesehilfe-Streifen, sondern sieht aus wie
   ein anderer Zustand. Eine Trennlinie reicht. */
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item {
    padding: 14px 18px !important;
    border-top: 1px solid var(--hz-surface-2) !important;
    background: #ffffff !important;
    font-size: var(--hz-fs-small) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item:first-child {
    border-top: 0 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title {
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.35 !important;
}

/* Edit / Remove: kleine Textknoepfe als letzte Zeile der Position, unter
   Gruppe und Domain. Das Bestellformular setzt sie in .item-title hinter
   den Namen; display: contents loest den Titel auf, damit order() die
   Knoepfe in der Spalte nach hinten schieben kann. Der Name bleibt ein
   anonymes Flex-Element und erbt Schrift und Farbe weiter vom Titel.
   Alles andere in der Spalte nimmt die volle Breite, so steht der Name
   allein in seiner Zeile.

   width/overflow: der Edit-Link erbt irgendwo width: 0 und
   overflow: hidden. Solange er inline lief, galt beides nicht; als
   Flex-Element verschwand er. */
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > [class*="col-"]:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 12px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > [class*="col-"]:first-child > :not(.item-title) {
    flex: 0 0 100% !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title {
    display: contents !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title > .btn,
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title > .visible-xs-inline {
    order: 1 !important;
    margin-top: 5px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title .btn {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    width: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-semibold) !important;
    line-height: 1.35 !important;
    vertical-align: baseline !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title .btn:hover {
    color: var(--hz-dom-red) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-title .btn i {
    font-size: 10.5px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-group {
    margin-top: 2px !important;
    color: var(--hz-text) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.35 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-domain {
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.35 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-price span {
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-body) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.35 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-price .cycle,
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-price .renewal,
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item-price .renewal-price {
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-mini) !important;
    font-weight: var(--hz-fw-semibold) !important;
}

/* Ab 576px: Name | Preis | x als Flex-Zeile. Im Bootstrap-Raster stand
   das x mittig in einer col-sm-1 und ragte ueber den Kartenrand hinaus.
   Jetzt endet es am Innenabstand der Karte, der Preis steht mit festem
   Abstand links davon, und die Spaltenueberschrift rueckt um denselben
   Platz ein, damit sie ueber dem Preis steht. */
@media (min-width: 576px) {
    #main-body #order-standard_cart:has(.view-cart-items) {
        --hz-cart-remove-slot: 38px;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        margin: 0 !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        padding-inline-start: 14px !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > [class*="col-"]:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-inline-start: 0 !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > .col-sm-1:last-child .btn-remove-from-cart {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        margin: 0 !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items-header > .row > [class*="col-"]:last-child {
        padding-inline-end: var(--hz-cart-remove-slot) !important;
    }
}

/* Auf dem Handy stapelt das Raster Name und Preis untereinander - jede
   Position wurde dadurch doppelt so hoch wie noetig. Nebeneinander,
   der Name nimmt den Platz, der Preis so viel, wie er braucht. */
@media (max-width: 575px) {
    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        row-gap: 6px !important;
        column-gap: 12px !important;
        margin: 0 !important;
    }

    /* width: auto - unter 576px tragen die Rasterspalten width: 100%,
       der Preis nahm sonst die ganze Zeile und der Name schrumpfte
       auf 0. */
    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > .item-price {
        display: flex !important;
        flex: 0 0 100% !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        justify-content: flex-end !important;
        column-gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: end !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items-header {
        padding: 10px 14px !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item {
        position: relative !important;
        padding: 12px 14px !important;
    }

    /* Verlängerungen besitzen – anders als normale Domainpositionen – eine
       eigene dritte Spalte fuer Entfernen. Sie bleibt als kompakte Aktion
       oben rechts, waehrend der Preis darunter seine eigene Zeile bekommt. */
    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item:has(> .row > .col-sm-1:last-child:not(.d-none)) > .row > [class*="col-"]:first-child {
        padding-inline-end: 92px !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > .col-sm-1:last-child:not(.d-none) {
        position: absolute !important;
        top: 12px !important;
        inset-inline-end: 14px !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > .col-sm-1:last-child:not(.d-none) .btn-remove-from-cart {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        width: auto !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .view-cart-items .item > .row > .col-sm-1:last-child:not(.d-none) .btn-remove-from-cart > span {
        display: inline !important;
    }
}

/* "Empty Cart" war ein roter Knopf mit Schatten - genauso laut wie
   "Checkout", obwohl er das Gegenteil tut. Jetzt ein ruhiger
   Nebenknopf, der erst beim Hover rot wird. */
#main-body #order-standard_cart:has(.view-cart-items) .empty-cart {
    margin: 0 0 22px !important;
    text-align: end !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .empty-cart .btn {
    height: 34px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    box-shadow: none !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .empty-cart .btn:hover {
    border-color: #f2c4c5 !important;
    background: #fdf2f2 !important;
    color: var(--hz-dom-red) !important;
}

/* --- 16.2  Bestelluebersicht ------------------------------------------ */

#main-body #order-standard_cart:has(.view-cart-items) .order-summary {
    border-color: var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-md) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary h2 {
    padding: 12px 18px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .summary-container {
    padding: 14px 18px 16px !important;
    font-size: var(--hz-fs-small) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .subtotal {
    padding: 0 0 8px !important;
    border-bottom-color: var(--hz-surface-2) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .recurring-totals {
    margin: 8px 0 0 !important;
    font-size: var(--hz-fs-small) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .recurring-charges {
    font-size: var(--hz-fs-mini) !important;
    line-height: 1.5 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .total-due-today-padded {
    margin: 14px 0 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .total-due-today .amt {
    font-size: 22px !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.2 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .total-due-today span:not(.amt) {
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-mini) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .btn-checkout {
    width: 100% !important;
    height: 46px !important;
    padding: 0 20px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-body) !important;
    box-shadow: var(--hz-shadow-md) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .btn-checkout i {
    font-size: var(--hz-fs-small) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .order-summary .btn-continue-shopping {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 4px 0 !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-semibold) !important;
    text-align: center !important;
}

/* --- 16.3  Gutschein und Steuer ---------------------------------------- */

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs {
    margin: 0 0 22px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs .nav-tabs > li > a,
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs .nav-tabs .nav-link {
    padding: 9px 14px !important;
    font-size: var(--hz-fs-small) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs .tab-content {
    padding: 14px 16px !important;
    border-color: var(--hz-dom-border) !important;
    border-radius: 0 0 var(--hz-radius) var(--hz-radius) !important;
}

/* Feld und Knopf in einer Zeile. Nur das Formular mit dem Eingabefeld -
   ist ein Gutschein eingeloest, steht an seiner Stelle ein Text mit
   eigenem Knopf. */
#main-body #order-standard_cart:has(.view-cart-items) #applyPromo form:has(#inputPromotionCode) {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) #applyPromo form:has(#inputPromotionCode) .form-group {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#main-body #order-standard_cart:has(.view-cart-items) #inputPromotionCode {
    height: 44px !important;
    min-height: 44px !important;
    padding-left: 40px !important;
    padding-right: 12px !important;
    border-color: var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .tab-pane.promo .field-icon {
    width: 40px !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .tab-pane.promo .field-icon i {
    font-size: var(--hz-fs-control) !important;
}

/* Die beiden Knoepfe der Reiter sind Nebenaktionen - rot gefuellt
   standen sie gleichrangig neben "Checkout". Jetzt die Pille der
   Markenfarbe, die beim Hover volllaeuft (wie die Kopfzeilen-Knoepfe
   im Kundenbereich, custom.css [70.12]).

   Die #calcTaxes-Zeile ist noetig: custom.css [60.3] setzt "Update
   Totals" mit drei IDs (15px, roter Schatten). */
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs .btn,
#main-body #order-standard_cart:has(.view-cart-items) #calcTaxes .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: rgb(var(--hz-primary-rgb) / .10) !important;
    color: var(--hz-dom-red) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs .btn:hover,
#main-body #order-standard_cart:has(.view-cart-items) .view-cart-tabs .btn:focus,
#main-body #order-standard_cart:has(.view-cart-items) #calcTaxes .btn:hover,
#main-body #order-standard_cart:has(.view-cart-items) #calcTaxes .btn:focus {
    background: var(--hz-dom-red) !important;
    color: #ffffff !important;
}

/* Handy: das Feld braucht dort 16px Schrift (unten), und neben dem
   Knopf blieb vom Platzhalter nur "Enter promo c". Feld und Knopf
   stehen deshalb untereinander, der Knopf ueber die volle Breite. */
@media (max-width: 575px) {
    #main-body #order-standard_cart:has(.view-cart-items) #applyPromo form:has(#inputPromotionCode) {
        flex-direction: column !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) #applyPromo .btn {
        width: 100% !important;
    }
}

/* Kein Hineinzoomen auf dem iPhone - siehe 11c. */
@media (pointer: coarse) {
    #main-body #order-standard_cart:has(.view-cart-items) #inputPromotionCode {
        font-size: 16px !important;
    }
}

/* --- 16.4  "Recommended for you" / "Last Chance" ----------------------- */
/* Dieselbe Werbeflaeche steht im Warenkorb (.mc-promos.viewcart, unter
   "Recommended for you") und im Checkout (.mc-promos.checkout, unter
   "Last Chance"). Das Markup ist gleich, die Karten-Regeln gelten
   deshalb fuer beide - anders als der Rest von Abschnitt 16 haengen sie
   nicht am Warenkorb-Praefix.

   MarketConnect bringt die Werbeflaeche in eigenen Farben mit:
   gestrichelter Rahmen, gruener Balken unten, gruener Knopf mit
   abgesetztem Pfeil, 18px duenne Schrift, die auf dem Handy nach
   wenigen Buchstaben abgeschnitten wurde ("Protect a s..."). Hier
   dieselbe Karte wie ueberall im Warenkorb.

   Die Liste unter der Kopfzeile klappt WHMCS per slideToggle auf und
   zu, also ueber den inline-style von .body - deshalb setzt hier nichts
   display auf .body. */

#main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body > div:has(> .mc-promos) {
    margin: 0 0 22px !important;
}

/* Die Ueberschrift traegt ihren Abstand als inline-style. */
#main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body > div:has(> .mc-promos) > h3 {
    margin: 0 0 10px !important;
    color: var(--hz-dom-text) !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) {
    max-width: none !important;
    margin: 0 !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo {
    overflow: hidden !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--hz-dom-border) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo:last-child {
    margin-bottom: 0 !important;
}

/* Kopfzeile: Symbol | Text | Preis und Knopf | Pfeil. Die Teile sind im
   Markup gefloatet und in anderer Reihenfolge (Knopf zuerst) - das
   Raster ordnet sie. */
#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .header {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto 14px !important;
    grid-template-areas: "icon content cta exp" !important;
    align-items: center !important;
    gap: 12px !important;
    height: auto !important;
    padding: 12px 16px !important;
    overflow: visible !important;
    border: 0 !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .icon {
    grid-area: icon !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .content {
    grid-area: content !important;
    min-width: 0 !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .headline {
    padding: 0 !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.3 !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .tagline {
    color: var(--hz-dom-muted) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-regular) !important;
    line-height: 1.35 !important;
}

/* .truncate schnitt den Text nach einer Zeile ab. */
#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .truncate {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .cta {
    grid-area: cta !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    float: none !important;
    padding: 0 !important;
    text-align: end !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .price {
    padding: 0 !important;
    color: var(--hz-dom-text) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .btn-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-dom-red) !important;
    color: #ffffff !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .btn-add:hover,
#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .btn-add:focus {
    background: var(--hz-primary-hover) !important;
    color: #ffffff !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .btn-add .text,
#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .btn-add .arrow {
    padding: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: inherit !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .btn-add .arrow i {
    font-size: 10px !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .expander {
    grid-area: exp !important;
    float: none !important;
    width: auto !important;
    color: var(--hz-muted) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1 !important;
    text-align: center !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .body {
    padding: 12px 16px 14px !important;
    border-top: 1px solid var(--hz-surface-2) !important;
    background: var(--hz-bg) !important;
    color: var(--hz-text) !important;
    font-size: var(--hz-fs-small) !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .body ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 16px !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .body li {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    float: none !important;
    width: auto !important;
    line-height: 1.45 !important;
}

#main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .body li i {
    flex: 0 0 auto !important;
    padding: 0 !important;
    color: var(--hz-dom-red) !important;
    font-size: var(--hz-fs-mini) !important;
}

/* Handy: Preis und Knopf bekommen eine eigene Zeile unter dem Text -
   daneben blieben fuer "Protect a single domain" keine 130px. */
@media (max-width: 575px) {
    #main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .header {
        grid-template-columns: 36px minmax(0, 1fr) 14px !important;
        grid-template-areas:
            "icon content exp"
            "cta  cta     cta" !important;
        gap: 10px 12px !important;
        padding: 12px 14px !important;
    }

    #main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .icon {
        width: 36px !important;
        height: 36px !important;
    }

    #main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .cta {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    #main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .body {
        padding: 10px 14px 12px !important;
    }

    #main-body #order-standard_cart .mc-promos:is(.viewcart, .checkout) .mc-promo .body ul {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --- 16.5  Reihenfolge, sobald die Spalten untereinander stehen -------- */
/* Unter 992px rutscht die Bestelluebersicht unter die ganze linke Spalte:
   Positionen, Empfehlung, Gutschein-Reiter - "Checkout" stand erst nach
   gut 1000px Scrollen im Bild.

   Neue Reihenfolge: Positionen -> Uebersicht mit Checkout -> Gutschein
   -> Empfehlung. Die Uebersicht folgt direkt auf das, was sie
   zusammenzaehlt, und steht damit auf dem Handy schon im ersten
   Bildschirm. Ganz nach oben, noch vor die Positionen, gehoert sie
   nicht: dann stuende die Summe vor dem, wofuer man bezahlt.

   Die linke Spalte ist eine Huelle um drei Bloecke; mit display:
   contents werden die drei zu Geschwistern der Uebersicht und lassen
   sich per order sortieren. Ihr seitliches Polster geht dabei verloren
   und wandert an die drei Bloecke.

   Das Skript des Bestellformulars, das die Uebersicht auf breiten
   Schirmen mitscrollen laesst, prueft auf float: none und tut dann
   nichts - die Huelle stoert es also nicht. */
@media (max-width: 991px) {
    #main-body #order-standard_cart:has(.view-cart-items) .cart-body > .row {
        display: flex !important;
        flex-direction: column !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body {
        display: contents !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body > * {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body > form {
        order: 1 !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-sidebar {
        order: 2 !important;
        width: 100% !important;
        margin: 0 0 22px !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body > .view-cart-tabs {
        order: 3 !important;
    }

    #main-body #order-standard_cart:has(.view-cart-items) .secondary-cart-body > div:has(> .mc-promos) {
        order: 4 !important;
    }
}

/* =====================================================================
   17) DOMAIN-TRANSFER: kompakte Groessen

   custom.css [30.5-30.9] gestaltet diese Seite, setzt die Werte aber
   pauschal fuer grosse Marketing-Karten (48px Titel, 56px Felder und
   30px Kartenueberschrift). Ausserdem trifft die dortige .text-center-
   Regel versehentlich auch den kleinen Sternchen-Hinweis unter dem
   Formular. :has(#frmDomainTransfer) haelt die Korrektur vollstaendig
   auf der Transfer-Seite; Seitenleiste und andere Bestellschritte
   behalten ihre bisherigen Masse.
   ===================================================================== */

/* Hero */
#order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center:not(.small) {
    margin-bottom: 24px !important;
    padding: 24px 24px 22px !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-lg) !important;
}

#order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center:not(.small) h2 {
    margin-bottom: 8px !important;
}

#order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center:not(.small) p {
    font-size: var(--hz-fs-body) !important;
    line-height: 1.55 !important;
}

/* Zwischen Hero und Formular liegt im WHMCS-Markup noch ein <br>. */
#order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center:not(.small) + br {
    display: none !important;
}

#order-standard_cart #frmDomainTransfer .panel-heading,
#order-standard_cart #frmDomainTransfer .card-header {
    padding: 16px 20px !important;
}

#order-standard_cart #frmDomainTransfer .panel-body,
#order-standard_cart #frmDomainTransfer .card-body {
    padding: 20px !important;
}

#order-standard_cart #frmDomainTransfer .form-group {
    margin-bottom: 14px !important;
}

#order-standard_cart #frmDomainTransfer .form-group:last-child {
    margin-bottom: 0 !important;
}

#order-standard_cart #frmDomainTransfer label {
    margin-bottom: 6px !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.35 !important;
}

#order-standard_cart #frmDomainTransfer .form-control,
#order-standard_cart #frmDomainTransfer input[type="text"] {
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    border: 1px solid var(--hz-line-strong) !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    color: var(--hz-navy) !important;
    font-size: var(--hz-fs-control) !important;
    line-height: 1.2 !important;
    box-shadow: inset 0 1px 2px rgb(var(--hz-navy-900-rgb) / .025) !important;
    cursor: text !important;
}

#order-standard_cart #frmDomainTransfer .form-control::placeholder,
#order-standard_cart #frmDomainTransfer input[type="text"]::placeholder {
    color: var(--hz-muted) !important;
    opacity: 1 !important;
}

#order-standard_cart #frmDomainTransfer .form-control:hover,
#order-standard_cart #frmDomainTransfer input[type="text"]:hover {
    border-color: #9ca9ba !important;
}

#order-standard_cart #frmDomainTransfer .form-control:focus,
#order-standard_cart #frmDomainTransfer input[type="text"]:focus {
    border-color: var(--brand-red) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgb(var(--hz-primary-rgb) / .10) !important;
}

#order-standard_cart #frmDomainTransfer .form-control:disabled,
#order-standard_cart #frmDomainTransfer input[type="text"]:disabled {
    border-color: var(--hz-line) !important;
    background: #eef1f5 !important;
    color: #7b8491 !important;
    cursor: not-allowed !important;
}

#order-standard_cart #frmDomainTransfer .panel-footer,
#order-standard_cart #frmDomainTransfer .card-footer {
    padding: 14px 20px !important;
}

#order-standard_cart #frmDomainTransfer #btnTransferDomain {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 22px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    line-height: 1 !important;
    box-shadow: var(--hz-shadow-md) !important;
}

/* Der Hinweis ist Text, kein zweiter Hero. */
#order-standard_cart:has(#frmDomainTransfer) .cart-body > p.text-center.small {
    position: static !important;
    overflow: visible !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: var(--hz-fs-mini) !important;
    line-height: 1.45 !important;
}

#order-standard_cart:has(#frmDomainTransfer) .cart-body > p.text-center.small::before,
#order-standard_cart:has(#frmDomainTransfer) .cart-body > p.text-center.small::after {
    content: none !important;
    display: none !important;
}

/* Vom Transfer-Skript manuell geoeffnete Hinweise liegen am body. Die
   eigene Klasse verhindert Seiteneffekte auf Hilfe-Tooltips anderswo. */
.hz-transfer-tooltip {
    pointer-events: none !important;
}

.hz-transfer-tooltip .tooltip-inner {
    max-width: 280px !important;
    padding: 7px 10px !important;
    border-radius: var(--hz-radius) !important;
    background: var(--hz-navy) !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.4 !important;
}

.hz-transfer-tooltip.bs-tooltip-bottom .arrow::before,
.hz-transfer-tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--hz-navy) !important;
}

@media (max-width: 767px) {
    #order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center:not(.small) {
        margin-bottom: 18px !important;
        padding: 20px 16px !important;
        border-radius: var(--hz-radius) !important;
    }

    #order-standard_cart #frmDomainTransfer .panel-heading,
    #order-standard_cart #frmDomainTransfer .card-header,
    #order-standard_cart #frmDomainTransfer .panel-body,
    #order-standard_cart #frmDomainTransfer .card-body {
        padding: 16px !important;
    }

    #order-standard_cart #frmDomainTransfer .panel-footer,
    #order-standard_cart #frmDomainTransfer .card-footer {
        padding: 12px 16px !important;
    }

    #order-standard_cart #frmDomainTransfer #btnTransferDomain {
        width: auto !important;
        min-width: 148px !important;
    }
}

/* iOS darf beim Antippen der kompakteren Felder nicht hineinzoomen. */
@media (max-width: 767px) and (pointer: coarse) {
    #order-standard_cart #frmDomainTransfer .form-control,
    #order-standard_cart #frmDomainTransfer input[type="text"] {
        font-size: 16px !important;
    }
}