/* =====================================================================
   HORANOS - BAUTEILE DES DESIGN-SYSTEMS
   ---------------------------------------------------------------------
   Jedes Bauteil ist hier genau einmal beschrieben. Alle Werte kommen aus
   css/tokens.css - in dieser Datei steht keine feste Farbe, Groesse oder
   Dauer, die es dort nicht als Namen gibt.

   Aufbau
     Teil A  Grundwerte ohne Ebene und ohne !important. Ersetzt die
             Bootstrap-Farben aus theme.min.css. Jede speziellere Regel
             des Themes gewinnt weiterhin.
     Teil B  Bauteile in der Ebene hz-system, mit !important. Gewinnen
             gegen jede aeltere Regel (siehe Kommentar in header.tpl).

   Ein Bauteil fuer ein neues Element benutzen
     Button     class="btn btn-primary"   (oder btn-default, btn-link)
                Groessen: btn-sm, btn-lg
     Feld       class="form-control"
     Dropdown   jedes <select> wird von footer.tpl zu .hz-select; eine
                eigene Liste bekommt class="hz-dropdown", ihre Eintraege
                class="hz-dropdown__item"
     Karte      class="card"

   Aeltere Klassen, die frueher ihr eigenes Aussehen hatten, stehen in den
   Listen der Vorlagen (z.B. .hero-btn-primary bei "Primaer-Button").
   Wer eine davon nicht mehr braucht, streicht sie nur aus der Liste.
   ===================================================================== */


/* =====================================================================
   TEIL A - GRUNDWERTE (schwach, ohne Ebene)
   ===================================================================== */

body {
    color: var(--hz-text);
}

a {
    color: var(--hz-link);
}

a:hover {
    color: var(--hz-link-hover);
}

/* Markierung in der Standardfarbe des Browsers, nicht in der Akzentfarbe */
::selection {
    background: Highlight;
    color: HighlightText;
}

/* --- Tabellen (Kundenbereich, DataTables) ------------------------------ */
.table {
    color: var(--hz-text);
}

.table th,
.table td {
    border-top-color: var(--hz-line);
    vertical-align: middle;
}

.table thead th {
    border-bottom: 1px solid var(--hz-line);
    background: var(--hz-surface);
    color: var(--hz-muted);
    font-size: var(--hz-fs-small);
    font-weight: var(--hz-fw-semibold);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--hz-bg);
}

.table-hover tbody tr:hover,
.table-list tbody tr:hover {
    background-color: var(--hz-surface-2);
}

/* --- Seitenzahlen ------------------------------------------------------ */
.page-link {
    border-color: var(--hz-line);
    background-color: var(--hz-surface);
    color: var(--hz-navy);
    transition: var(--hz-transition-color);
}

.page-link:hover {
    border-color: var(--hz-line);
    background-color: var(--hz-surface-2);
    color: var(--hz-primary);
}

.page-item.active .page-link {
    border-color: var(--hz-primary);
    background-color: var(--hz-primary);
    color: var(--hz-on-dark);
}

.page-item.disabled .page-link {
    color: var(--hz-muted);
}

.page-link:focus {
    box-shadow: var(--hz-focus-ring);
}

/* --- Karten ------------------------------------------------------------ */
.card {
    border-color: var(--hz-line);
    border-radius: var(--hz-radius);
}

.card-header,
.card-footer {
    border-color: var(--hz-line);
    background-color: var(--hz-surface);
}

.card-header:first-child {
    border-radius: calc(var(--hz-radius) - 1px) calc(var(--hz-radius) - 1px) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--hz-radius) - 1px) calc(var(--hz-radius) - 1px);
}

/* --- Hinweise ---------------------------------------------------------- */
.alert {
    border-radius: var(--hz-radius);
}

.alert-success {
    border-color: rgb(30 122 80 / .2);
    background-color: var(--hz-success-soft);
    color: var(--hz-success);
}

.alert-info {
    border-color: rgb(var(--hz-navy-rgb) / .15);
    background-color: var(--hz-info-soft);
    color: var(--hz-navy);
}

.alert-warning {
    border-color: rgb(154 100 18 / .2);
    background-color: var(--hz-warning-soft);
    color: var(--hz-warning);
}

.alert-danger {
    border-color: rgb(180 35 24 / .2);
    background-color: var(--hz-danger-soft);
    color: var(--hz-danger);
}

/* --- Reiter, Listen, Fortschritt --------------------------------------- */
.nav-tabs {
    border-bottom-color: var(--hz-line);
}

.nav-tabs .nav-link {
    color: var(--hz-muted);
}

.nav-tabs .nav-link:hover {
    color: var(--hz-navy);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-color: var(--hz-line) var(--hz-line) var(--hz-surface);
    color: var(--hz-navy);
}

.list-group-item.active {
    border-color: var(--hz-line);
    background-color: var(--hz-primary-soft);
    color: var(--hz-primary);
}

.progress-bar {
    background-color: var(--hz-primary);
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--hz-primary);
    background-color: var(--hz-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--hz-focus-ring);
}

/* --- Kleingedrucktes ---------------------------------------------------- */
/* Bootstrap setzt 80 % der Umgebung - ergibt 12.8px, knapp neben der
   Stufe "klein" */
small,
.small {
    font-size: var(--hz-fs-small);
}

/* --- Badges ------------------------------------------------------------ */
.badge {
    border-radius: var(--hz-radius);
    font-size: var(--hz-fs-mini);
    font-weight: var(--hz-fw-semibold);
}

/* Bootstrap bringt Tuerkis (info), Grau und Gelb mit - hier dieselben
   Statusfarben wie bei den Hinweisen */
.badge-primary {
    background-color: var(--hz-primary-soft);
    color: var(--hz-primary);
}

.badge-info,
.badge-secondary,
.badge-light {
    background-color: var(--hz-info-soft);
    color: var(--hz-navy);
}

.badge-success {
    background-color: var(--hz-success-soft);
    color: var(--hz-success);
}

.badge-warning {
    background-color: var(--hz-warning-soft);
    color: var(--hz-warning);
}

.badge-danger {
    background-color: var(--hz-danger-soft);
    color: var(--hz-danger);
}


/* =====================================================================
   TEIL B - BAUTEILE (Ebene hz-system)
   ===================================================================== */

@layer hz-system {

    /* =================================================================
       B1  Farb-Hilfsklassen von Bootstrap
       theme.min.css setzt sie mit !important auf das Twenty-One-Blau.
       ================================================================= */
    .text-primary { color: var(--hz-primary) !important; }
    .text-info { color: var(--hz-navy) !important; }
    .text-success { color: var(--hz-success) !important; }
    .text-warning { color: var(--hz-warning) !important; }
    .text-danger { color: var(--hz-danger) !important; }
    .text-muted { color: var(--hz-muted) !important; }
    .bg-primary { background-color: var(--hz-primary) !important; }
    .border-primary { border-color: var(--hz-primary) !important; }


    /* =================================================================
       B2  Button-Vorlage
       -----------------------------------------------------------------
       Form (fuer alle gleich): Hoehe 40px, Radius md, Schrift 14.5/600.
       Arten: primaer, sekundaer, dezent, gefaehrlich.
       Hover aendert nur Farben. Kein Verlauf, kein farbiger Schatten,
       keine Bewegung.

       :where() haelt die Spezifitaet bei null. Groessen (.btn-sm) und
       Arten ueberschreiben die Form dadurch ohne Rangelei.
       ================================================================= */

    /* Alle Buttons - hier eintragen, was wie ein Button aussehen soll */
    :where(.btn, .hero-btn, .hp-btn, .cta-btn, .ssl-btn, .hosting-showcase-btn,
           .pro-ssl-button, .contact-submit-btn, .ultra-domain-pricing-btn,
           .form__button, .switch__button, .ann-modern-btn, .kb-article-vote-btn,
           .ticket-modern-cancel, a[id$="-order-button"]):not(:where(.btn-icon, .btn-reveal-pw, .close)) {
        height: auto !important;
        min-height: var(--hz-h-md) !important;
        padding: 9px 18px !important;
        border-width: 1px !important;
        border-style: solid !important;
        border-radius: var(--hz-radius) !important;
        box-shadow: none !important;
        background-image: none !important;
        font-family: var(--hz-font) !important;
        font-size: var(--hz-fs-control) !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 20px !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        text-shadow: none !important;
        text-decoration: none !important;
        filter: none !important;
        transform: none !important;
        transition: var(--hz-transition-color) !important;
    }

    /* Groessen */
    .btn-sm,
    .btn-xs,
    .btn-group-sm > .btn {
        min-height: var(--hz-h-sm) !important;
        padding: 5px 12px !important;
        font-size: var(--hz-fs-small) !important;
    }

    /* Ausnahme: Bearbeiten / Entfernen in den Warenkorbpositionen sind
       Textverweise ohne Flaeche. Mit der Innenpolsterung stand "Bearbeiten"
       12px eingerueckt unter der Domain, und das x wurde 32px hoch.
       Hover faerbt nur die Schrift (cart-domain.css). */
    #order-standard_cart .view-cart-items .item .btn-xs {
        min-height: 0 !important;
        padding: 0 !important;
    }

    #order-standard_cart .view-cart-items .item .btn-xs:is(:hover, :active) {
        background-color: transparent !important;
    }

    .btn-lg,
    .btn-group-lg > .btn {
        min-height: var(--hz-h-lg) !important;
        padding: 13px 24px !important;
        font-size: var(--hz-fs-body) !important;
    }

    /* Domainsuche, Endungs-Zeilen: "Contact Support" und "Unavailable"
       sind gleich gross und kleiner als die Vorlage. Die feste Breite
       haelt beide Knoepfe untereinander buendig. Die Masse muessen hier in
       der Ebene stehen - cart-domain.css kommt gegen die Vorlage oben
       nicht an, auch nicht mit !important.

       Die Beschriftung ist je nach Sprache verschieden lang ("Support
       kontaktieren" braucht bei 13px 137px, im Knopf sind 118px frei).
       Das Skript "Knopfbeschriftung einpassen" in footer.tpl verkleinert
       die Schrift ueber --hz-fit-fs, bis sie passt, und gibt erst unter
       10px den Umbruch frei (--hz-fit-ws). */
    #spotlightTlds .domain-lookup-result :is(.domain-contact-support, .btn.unavailable, .btn.invalid) {
        flex: 0 0 auto !important;
        width: 132px !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: var(--hz-h-sm) !important;
        padding: 5px 6px !important;
        font-size: var(--hz-fit-fs, var(--hz-fs-small)) !important;
        line-height: 20px !important;
        white-space: var(--hz-fit-ws, nowrap) !important;
    }

    /* Domainsuche, Vorschlagsliste: der Warenkorb-Knopf bleibt in der
       Zeile neben dem Preis, in der kleinen Groesse wie der Preis daneben.
       Auf dem Handy traegt er nur das Symbol (cart-domain.css). Keine
       feste Breite: nach dem Klick steht dort "Checkout". */
    #domainSuggestions .domain-suggestion .btn-add-to-cart {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: var(--hz-h-sm) !important;
        padding: 5px 14px !important;
        font-size: var(--hz-fs-small) !important;
    }

    @media (max-width: 767px) {
        #domainSuggestions .domain-suggestion .btn-add-to-cart {
            min-width: var(--hz-h-sm) !important;
            padding: 5px 9px !important;
        }
    }

    /* Sekundaer: weiss mit Rahmen */
    :where(.btn-default, .btn-secondary, .btn-light, .btn-info,
           .btn-outline-primary, .btn-outline-secondary, .btn-outline-default,
           .hero-btn-light, .hp-btn-secondary, .cta-btn-ghost,
           .ssl-btn:not(.primary), .ann-modern-btn, .kb-article-vote-btn,
           .ticket-modern-cancel, #btnTicketAttachmentsAdd,
           #btnViewAllCerts, #btnHelpMeChoose) {
        border-color: var(--hz-line-strong) !important;
        background-color: var(--hz-surface) !important;
        color: var(--hz-navy) !important;
    }

    :where(.btn-default, .btn-secondary, .btn-light, .btn-info,
           .btn-outline-primary, .btn-outline-secondary, .btn-outline-default,
           .hero-btn-light, .hp-btn-secondary, .cta-btn-ghost,
           .ssl-btn:not(.primary), .ann-modern-btn, .kb-article-vote-btn,
           .ticket-modern-cancel, #btnTicketAttachmentsAdd,
           #btnViewAllCerts, #btnHelpMeChoose):is(:hover, :active, .active) {
        border-color: var(--hz-navy) !important;
        background-color: var(--hz-surface) !important;
        color: var(--hz-navy) !important;
    }

    /* Primaer: Markenrot. Steht nach "sekundaer", damit Buttons in einem
       primaeren Zusammenhang (z.B. .hp-cta-row) rot werden, auch wenn sie
       btn-default tragen. */
    :where(.btn-primary, .btn-success, .btn-warning, .btn-checkout,
           .hero-btn-primary, .hp-btn-primary, .cta-btn-primary, .ssl-btn.primary,
           .hosting-showcase-btn, .pro-ssl-button, .contact-submit-btn,
           .ultra-domain-pricing-btn, .form__button, .switch__button, a[id$="-order-button"],
           .hp-cta-row .btn, #frmCheckout .btn-lg, .item > form > .btn,
           #checkout, #btnCheckAvailability, #btnTransferDomain, #openTicketSubmit,
           #resetPasswordButton, #btnKnowledgebaseSearch, #btnDownloadsSearch) {
        border-color: var(--hz-primary) !important;
        background-color: var(--hz-primary) !important;
        color: var(--hz-on-dark) !important;
    }

    /* SSL-Shop: die Bestellknoepfe waren fest 110px breit und brachen
       "Order Now" auf zwei Zeilen um */
    .item > form > .btn {
        width: auto !important;
        white-space: nowrap !important;
    }

    /* Die Liste muss dieselben Eintraege haben wie der Ruhezustand darueber -
       fehlte .item > form > .btn, blieben die SSL-Bestellknoepfe beim Hover
       unveraendert, waehrend die gleich aussehenden Plan-Knoepfe dunkler
       wurden. */
    :where(.btn-primary, .btn-success, .btn-warning, .btn-checkout,
           .hero-btn-primary, .hp-btn-primary, .cta-btn-primary, .ssl-btn.primary,
           .hosting-showcase-btn, .pro-ssl-button, .contact-submit-btn,
           .ultra-domain-pricing-btn, .form__button, .switch__button, a[id$="-order-button"],
           .hp-cta-row .btn, #frmCheckout .btn-lg, .item > form > .btn,
           #checkout, #btnCheckAvailability, #btnTransferDomain, #openTicketSubmit,
           #resetPasswordButton, #btnKnowledgebaseSearch, #btnDownloadsSearch):is(:hover, :active, .active) {
        border-color: var(--hz-primary-hover) !important;
        background-color: var(--hz-primary-hover) !important;
        color: var(--hz-on-dark) !important;
    }

    /* Dezent: nur Schrift, Flaeche erst beim Hover */
    :where(.btn-link, #continueShopping) {
        border-color: transparent !important;
        background-color: transparent !important;
        color: var(--hz-primary) !important;
    }

    :where(.btn-link, #continueShopping):is(:hover, :active) {
        border-color: transparent !important;
        background-color: var(--hz-primary-soft) !important;
        color: var(--hz-primary-hover) !important;
    }

    /* Gefaehrlich: Loeschen, Zugang entziehen */
    :where(.btn-danger) {
        border-color: var(--hz-danger) !important;
        background-color: var(--hz-danger) !important;
        color: var(--hz-on-dark) !important;
    }

    :where(.btn-danger):is(:hover, :active) {
        border-color: var(--hz-primary-hover) !important;
        background-color: var(--hz-primary-hover) !important;
    }

    /* Gesperrt */
    :where(.btn, .hero-btn, .hp-btn, .cta-btn, .ssl-btn, .contact-submit-btn,
           .form__button):is(:disabled, .disabled, [aria-disabled="true"]) {
        opacity: .5 !important;
        cursor: not-allowed !important;
    }

    /* Fokus: nur bei Tastatur sichtbar */
    :where(.btn, .hero-btn, .hp-btn, .cta-btn, .ssl-btn, .hosting-showcase-btn,
           .pro-ssl-button, .contact-submit-btn, .ultra-domain-pricing-btn,
           .form__button, .ann-modern-btn, .kb-article-vote-btn,
           .ticket-modern-cancel):focus {
        outline: 0 !important;
        box-shadow: none !important;
    }

    :where(.btn, .hero-btn, .hp-btn, .cta-btn, .ssl-btn, .hosting-showcase-btn,
           .pro-ssl-button, .contact-submit-btn, .ultra-domain-pricing-btn,
           .form__button, .ann-modern-btn, .kb-article-vote-btn,
           .ticket-modern-cancel):focus-visible {
        box-shadow: var(--hz-focus-ring) !important;
    }

    /* Buttons, die an ein Feld anschliessen, haben dort keine Rundung */
    .input-group > .input-group-append > .btn,
    .input-group > .input-group-btn:last-child > .btn {
        border-start-start-radius: 0 !important;
        border-end-start-radius: 0 !important;
    }

    .input-group > .input-group-prepend > .btn,
    .input-group > .input-group-btn:first-child > .btn {
        border-start-end-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }

    /* Mehrere Buttons hintereinander (Feld | Knopf | Knopf): nur die
       aeusseren Ecken bleiben rund. "Register a New Domain" im
       Kundenbereich ist davon ausgenommen, siehe B12. */
    .input-group > .input-group-append > .btn:not(:last-child),
    .input-group > .input-group-btn:last-child > .btn:not(:last-child) {
        border-start-end-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }

    .input-group > .input-group-prepend > .btn:not(:first-child),
    .input-group > .input-group-btn:first-child > .btn:not(:first-child) {
        border-start-start-radius: 0 !important;
        border-end-start-radius: 0 !important;
    }

    /* Anhang-Zeile (Ticket): "Add More" steht mit Abstand neben dem
       Dateifeld (gap in custom.css), stoesst also nirgends an - rundum
       rund. Sonst fehlte die Rundung auf der Anfangsseite, in RTL rechts. */
    .attachment-group > .input-group-append > .btn {
        border-radius: var(--hz-radius) !important;
    }


    /* =================================================================
       B3  Feld-Vorlage
       -----------------------------------------------------------------
       Form: Hoehe 40px, Radius md, Rahmen line-strong, Schrift 15/400.
       Fokus: Rand in Primaerfarbe und ein Schein - ueberall derselbe.

       Die seitliche Polsterung bleibt beim Theme: Felder mit Symbol
       (.prepend-icon) brauchen links mehr Platz als andere.

       Suchleisten mit eigenem Rahmen (.ultra-domain-box, .kb-search-box)
       sind ausgenommen - dort traegt der Kasten Rahmen und Fokus.

       Das DNSSEC-Formular des Registrar-Moduls liefert Felder ohne Klasse
       (.primary-content table:has(textarea) ...). Sie standen mit dem
       Browser-Rahmen da, auf dem iPhone fehlte die Oberkante.
       ================================================================= */

    :where(.form-control, .custom-select, input.field, .form__input,
           .hz-select__btn, .hp-select__btn,
           .primary-content table:has(textarea) :is(input[type="text"], textarea)):not(:where(.ultra-domain-box, .kb-search-box) *) {
        border: 1px solid var(--hz-line-strong) !important;
        border-radius: var(--hz-radius) !important;
        background-color: var(--hz-surface) !important;
        box-shadow: none !important;
        color: var(--hz-navy) !important;
        font-family: var(--hz-font) !important;
        font-size: var(--hz-fs-body) !important;
        font-weight: var(--hz-fw-regular) !important;
        transition: var(--hz-transition-color) !important;
    }

    /* Einzeilige Felder: feste Hoehe */
    :where(.form-control, .custom-select, input.field, .form__input,
           .hz-select__btn, .hp-select__btn,
           .primary-content table:has(textarea) :is(input[type="text"], textarea)):not(textarea, select[multiple], select[size]:not([size="1"])):not(:where(.ultra-domain-box, .kb-search-box) *) {
        height: var(--hz-control-h, var(--hz-h-md)) !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: normal !important;
    }

    /* Modulfelder ohne Klasse: Browser-Optik aus, sonst zeichnet das
       iPhone sein eigenes Feld ueber den Rahmen */
    .primary-content table:has(textarea) :is(input[type="text"], textarea) {
        -webkit-appearance: none;
        appearance: none;
    }

    textarea.form-control,
    .primary-content table:has(textarea) textarea {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        line-height: var(--hz-lh-body) !important;
    }

    /* Hoehe je Umgebung */
    .form-control-sm,
    .input-sm,
    .input-group-sm,
    .dataTables_wrapper {
        --hz-control-h: var(--hz-h-sm);
    }

    .form-control-lg,
    .input-lg,
    .input-group-lg {
        --hz-control-h: var(--hz-h-lg);
    }

    :where(.form-control, .custom-select, input.field, .form__input,
           .hz-select__btn, .hp-select__btn, .primary-content table:has(textarea) :is(input[type="text"], textarea)):hover {
        border-color: var(--hz-line-hover) !important;
    }

    :where(.form-control, .custom-select, input.field, .form__input,
           .hz-select__btn, .hp-select__btn, .primary-content table:has(textarea) :is(input[type="text"], textarea)):focus,
    .hz-select.is-open > .hz-select__btn,
    .hp-select.is-open > .hp-select__btn {
        border-color: var(--hz-primary) !important;
        outline: 0 !important;
        box-shadow: var(--hz-focus-ring) !important;
    }

    :where(.form-control, .custom-select, input.field, .form__input, .primary-content table:has(textarea) :is(input[type="text"], textarea))::placeholder {
        color: var(--hz-muted) !important;
        opacity: 1 !important;
    }

    :where(.form-control, .custom-select, input.field, .form__input,
           .hz-select__btn):is(:disabled, [readonly]) {
        background-color: var(--hz-surface-2) !important;
        color: var(--hz-muted) !important;
    }

    :where(.form-control, .custom-select, .hz-select__btn):is(.is-invalid, [aria-invalid="true"]),
    .has-error :where(.form-control, .hz-select__btn) {
        border-color: var(--hz-danger) !important;
    }

    /* iPhone vergroessert die Seite bei Feldern unter 16px */
    @media (pointer: coarse) {
        :where(.form-control, .custom-select, input.field, .form__input,
               .hz-select__btn, .hp-select__btn, .primary-content table:has(textarea) :is(input[type="text"], textarea)) {
            font-size: 16px !important;
        }
    }

    /* Ausnahme: eingeklappte Seitenleiste im Bestellvorgang (Handy).
       Dort liegt das Auswahlfeld unsichtbar ueber dem Kasten, damit die
       Beschriftung "Categories" / "Actions" darunter lesbar bleibt
       (cart-domain.css, Abschnitt zur .sidebar-collapsed). Nur der Rand
       zeigt Hover und Fokus. */
    #order-standard_cart .sidebar-collapsed .hz-select__btn {
        height: 100% !important;
        background-color: transparent !important;
    }

    #order-standard_cart .sidebar-collapsed .hz-select:not(.is-open) > .hz-select__btn:not(:hover, :focus) {
        border-color: transparent !important;
    }

    /* Vorsatz vor dem Feld (Waehrung, @, Symbol) */
    .input-group-text {
        height: var(--hz-control-h, var(--hz-h-md)) !important;
        border: 1px solid var(--hz-line-strong) !important;
        border-radius: var(--hz-radius) !important;
        background-color: var(--hz-surface-2) !important;
        color: var(--hz-muted) !important;
        font-size: var(--hz-fs-body) !important;
    }

    /* In einer Gruppe teilen sich die Teile eine Rundung */
    .input-group > .form-control:not(:last-child),
    .input-group > .custom-select:not(:last-child),
    .input-group > .input-group-prepend > .input-group-text {
        border-start-end-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }

    .input-group > .form-control:not(:first-child),
    .input-group > .custom-select:not(:first-child),
    .input-group > .input-group-append > .input-group-text {
        border-start-start-radius: 0 !important;
        border-end-start-radius: 0 !important;
    }

    /* Haekchen und Optionsfelder in Markenfarbe */
    input[type="checkbox"],
    input[type="radio"] {
        accent-color: var(--hz-primary);
    }


    /* =================================================================
       B4  Fokus fuer alles andere, das man anklicken kann
       ================================================================= */
    :where(a, summary, [role="button"], [tabindex]:not([tabindex="-1"]),
           button:not(.btn, .hz-select__btn, .hp-select__btn)):focus-visible {
        outline: 2px solid var(--hz-primary) !important;
        outline-offset: 2px !important;
    }

    #header :where(a, button):focus-visible {
        outline-color: var(--hz-primary-on-dark) !important;
    }


    /* =================================================================
       B5  Dropdown-Vorlage
       -----------------------------------------------------------------
       Eine Liste, zwei Farbsaetze: hell ueberall, dunkel in der
       Kopfzeile. Die Farben kommen aus den --hz-dd-*-Namen in
       tokens.css; #header setzt dort dieselben Namen dunkel. Die Form -
       Radius, Polster, Zeilenhoehe, Schrift, Tempo - ist ueberall gleich.

       Eine neue Liste bekommt das Aussehen, indem ihre Klassen hier in
       die Liste "Kasten" und "Eintrag" aufgenommen werden - oder indem
       sie gleich .hz-dropdown / .hz-dropdown__item benutzt.

       Das Handy-Menue (Schublade, mobile-nav.css) liegt in der Ebene
       hz-drawer, die vor hz-system rangiert, und behaelt dort sein
       eigenes Listenbild.
       ================================================================= */

    /* Kasten */
    :where(.hz-dropdown, .dropdown-menu, .hz-select__list, .hp-select__list, .hz-lang-menu) {
        border: 1px solid var(--hz-dd-border) !important;
        border-radius: var(--hz-dd-radius) !important;
        background: var(--hz-dd-bg) !important;
        box-shadow: var(--hz-dd-shadow) !important;
        padding: var(--hz-dd-pad) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        font-family: var(--hz-font) !important;
        text-align: start !important;
    }

    :where(.hz-dropdown, .dropdown-menu) {
        min-width: var(--hz-dd-min-w) !important;
    }

    :where(.hz-select__list, .hp-select__list) {
        max-height: var(--hz-dd-max-h) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
    }

    /* Ein Eintrag, der breiter ist als die Liste, ragte hinaus und gab
       der Liste einen seitlichen Rollbalken ("- Andere Kategorie
       auswaehlen -"). Er bricht jetzt zwischen Woertern um. */
    :where(.hz-select__list, .hp-select__list) > li {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Eingeklappte Seitenleiste (Warenkorb, schmale Schirme): die Liste
       waechst mit ihrem laengsten Eintrag, mindestens so breit wie der
       Knopf, hoechstens bis an den Seitenrand. Erst darueber greift der
       Umbruch oben. */
    .sidebar-collapsed .hz-select__list {
        width: max-content !important;
        min-width: max(100%, 220px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Die Sprachliste ordnet ihre Eintraege mit gap - die Abstaende
       kommen hier wie ueberall ueber die Eintraege selbst. */
    .hz-lang-menu {
        gap: 0 !important;
    }

    /* Zeilen-Huellen (li in navbar.tpl) tragen selbst nichts */
    .dropdown-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Eintrag */
    :where(.hz-dropdown__item, .dropdown-menu > li > a, .dropdown-menu > a.dropdown-item,
           .dropdown-menu > button.dropdown-item, .hz-select__opt, .hp-select__opt,
           .hz-lang-item) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-height: var(--hz-dd-item-h) !important;
        margin: 0 !important;
        padding: 8px var(--hz-dd-item-px) !important;
        border: 0 !important;
        border-radius: var(--hz-dd-item-radius) !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--hz-dd-item-color) !important;
        font-family: var(--hz-font) !important;
        font-size: var(--hz-dd-item-fs) !important;
        font-weight: var(--hz-fw-regular) !important;
        line-height: 20px !important;
        text-align: start !important;
        text-decoration: none !important;
        transform: none !important;
        transition: var(--hz-transition-color) !important;
        cursor: pointer;
    }

    /* Abstand zwischen zwei Zeilen */
    :where(.dropdown-menu > li, .dropdown-menu > a.dropdown-item, .hz-dropdown__item,
           .hz-select__opt, .hp-select__opt, .hz-select__group, .hz-lang-item):not(:last-child) {
        margin-bottom: var(--hz-dd-gap) !important;
    }

    :where(.hz-dropdown__item, .dropdown-menu > li > a, .dropdown-menu > a.dropdown-item,
           .dropdown-menu > button.dropdown-item, .hz-select__opt, .hp-select__opt,
           .hz-lang-item):is(:hover, :focus-visible),
    .hz-lang-item.active {
        background: var(--hz-dd-item-hover-bg) !important;
        color: var(--hz-dd-item-hover-color) !important;
        outline: 0 !important;
    }

    :where(.hz-dropdown__item, .dropdown-menu > li > a, .dropdown-menu > a.dropdown-item,
           .hz-select__opt, .hp-select__opt):is(.active, .is-active, [aria-selected="true"]),
    .dropdown-menu > li.active > a {
        background: var(--hz-dd-item-active-bg) !important;
        color: var(--hz-dd-item-active-color) !important;
        font-weight: var(--hz-fw-semibold) !important;
    }

    /* Sprachwahl: gewaehlte Sprache wie Hover, nur fett statt Akzentfarbe */
    .hz-lang-item.active {
        font-weight: var(--hz-fw-semibold) !important;
    }

    :where(.hz-select__opt.is-disabled, .dropdown-item.disabled, .hz-dropdown__item[aria-disabled="true"]) {
        opacity: .45 !important;
        pointer-events: none !important;
    }

    /* Symbole in Eintraegen stehen in einer Spalte */
    :where(.hz-dropdown__item, .dropdown-menu > li > a, .dropdown-menu > a.dropdown-item) > i {
        flex: 0 0 16px !important;
        width: 16px !important;
        color: inherit !important;
        text-align: center !important;
        opacity: .7;
    }

    /* Punkte, die das Theme frueher vor jeden Eintrag gesetzt hat */
    :where(.dropdown-menu > li > a, .dropdown-menu > a.dropdown-item)::before {
        content: none !important;
    }

    /* Gruppenkopf und Trennlinie */
    :where(.hz-select__group, .dropdown-header) {
        margin: 0 !important;
        padding: 8px var(--hz-dd-item-px) 4px !important;
        color: var(--hz-dd-group-color) !important;
        font-size: var(--hz-fs-mini) !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 16px !important;
    }

    .dropdown-divider {
        height: 0 !important;
        margin: var(--hz-dd-pad) 0 !important;
        border-top: 1px solid var(--hz-dd-divider) !important;
        background: transparent !important;
    }

    /* Aufklappen: ueberall dasselbe Tempo.
       Bootstrap-Listen positioniert Popper per transform - dort nur
       einblenden, sonst springt die Liste. */
    .hz-select.is-open > .hz-select__list,
    .hp-select.is-open > .hp-select__list,
    .hz-dropdown.is-open {
        animation: hz-dd-in var(--hz-dur) var(--hz-ease) !important;
    }

    .dropdown-menu.show:not(#header *) {
        animation: hz-dd-fade var(--hz-dur) var(--hz-ease) !important;
    }

    .hz-lang-menu {
        transition:
            opacity var(--hz-dur) var(--hz-ease),
            transform var(--hz-dur) var(--hz-ease),
            visibility var(--hz-dur) !important;
    }

    .hz-select__chev,
    .hp-select__chev {
        transition: transform var(--hz-dur) var(--hz-ease) !important;
    }

    @keyframes hz-dd-in {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes hz-dd-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Menues der Kopfzeile (PC): gleiches Tempo, kurzer Weg, ohne die
       rote Spitze. Die Position (mittig unter dem Menuepunkt) bleibt,
       wie custom.css sie setzt - daher translateX(50%). */
    @media (min-width: 1200px) {
        #header .hz-menu .dropdown-menu {
            transform: translateX(50%) translateY(6px) !important;
            transition:
                opacity var(--hz-dur) var(--hz-ease),
                transform var(--hz-dur) var(--hz-ease),
                visibility var(--hz-dur) !important;
        }

        #header .hz-menu li.dropdown:hover > .dropdown-menu,
        #header .hz-menu li.dropdown.show > .dropdown-menu,
        #header .hz-menu li.open > .dropdown-menu {
            transform: translateX(50%) !important;
        }

        #header .hz-menu .dropdown-menu::before {
            display: none !important;
        }
    }


    /* =================================================================
       B6  Ueberschriften
       -----------------------------------------------------------------
       Eine Skala fuer die ganze Seite (Werte in tokens.css). Die
       Kopfzeile ist ausgenommen, h5/h6 behalten ihre Groesse.
       Ebenfalls ausgenommen: der Cookie-Hinweis (#klaro). Klaro setzt
       seinen Titel als h2 und den Dialogtitel als h1 - mit der Skala
       stand dort 24px bzw. 30px in einer kleinen Karte. Die Groessen
       dafuer stehen in css/consent.css.
       ================================================================= */
    /* :not(:where(...)) statt :not(#header *): ein :not() zaehlt so viel
       wie sein Inhalt, #header also wie eine ID - dann haette jede
       speziellere Ueberschriften-Regel unten (Hero) verloren. */
    :where(h1, .h1):not(:where(#header *, #klaro *)) {
        font-size: var(--hz-fs-h1) !important;
    }

    :where(h2, .h2):not(:where(#header *, #klaro *)) {
        font-size: var(--hz-fs-h2) !important;
    }

    :where(h3, .h3):not(:where(#header *, #klaro *)) {
        font-size: var(--hz-fs-h3) !important;
    }

    :where(h4, .h4):not(:where(#header *, #klaro *)) {
        font-size: var(--hz-fs-h4) !important;
    }

    :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4):not(:where(#header *, #klaro *)) {
        font-family: var(--hz-font) !important;
        font-weight: var(--hz-fw-bold) !important;
        line-height: var(--hz-lh-tight) !important;
        letter-spacing: normal !important;
    }

    /* Die grosse Ueberschrift der Startseite */
    .horanos-hero-box h1 {
        font-size: var(--hz-fs-hero) !important;
    }

    /* Kopf einer Karte, keine Abschnittsueberschrift: "Most Popular
       Articles" stand als h2 in 24px ueber 18px grossen Artikeltiteln. */
    .kb-popular-title h2 {
        font-size: var(--hz-fs-h3) !important;
    }

    /* FAQ-Leiste der Startseite: der Titel sitzt in einem schmalen
       Aufklapp-Balken (wie .compare-header), nicht als Abschnittsueberschrift */
    .premium-faq-header h2 {
        font-size: var(--hz-fs-h4) !important;
    }

    @media (max-width: 768px) {
        .premium-faq-header h2 {
            font-size: var(--hz-fs-control) !important;
        }
    }

    /* Kopf der Seitenleisten-Kaesten ("Manage", "Actions", "Categories",
       "Your Info"). Die Titel sind h3 und bekamen oben die Groesse einer
       Abschnittsueberschrift (18px) - uebergross ueber 14,5px grossen
       Menuezeilen. Das Symbol davor hatte je nach Seite eine eigene
       Groesse: 18px im Kundenbereich, 14,5px im Warenkorb (ui-scale.css).
       Jetzt eine Konstante fuer alle Seitenleisten, das Symbol folgt ihr. */
    :is(.sidebar, .cart-sidebar, .card-sidebar, .panel-sidebar) :is(.card-header, .panel-heading) :is(.card-title, .panel-title) {
        font-size: var(--hz-fs-sidebar-title) !important;
    }

    :is(.sidebar, .cart-sidebar, .card-sidebar, .panel-sidebar) :is(.card-header, .panel-heading) :is(.card-title, .panel-title) > i:not(.card-minimise, [class*="chevron"]) {
        font-size: 0.9em !important;
    }

    /* Seitentitel im Bestellvorgang (Domain registrieren, Transfer,
       Warenkorb). Frueher ein rosa Etikett in 14px Grossbuchstaben -
       jetzt eine normale Seitenueberschrift wie auf den anderen Seiten,
       eine Stufe unter H1, weil die Seitenleiste daneben steht. */
    #order-standard_cart .header-lined h1 {
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--hz-navy) !important;
        font-size: var(--hz-fs-h2) !important;
        letter-spacing: normal !important;
        text-transform: none !important;
    }

    /* Werbekaesten neben der Domainsuche: der Hinweis unter dem Titel
       war in einem Kasten gelb (text-warning), im anderen rot */
    #order-standard_cart .domain-promo-box :is(.text-warning, .text-primary, .text-danger, .text-success) {
        color: var(--hz-primary) !important;
    }


    /* =================================================================
       B7  Startseite: Domainsuche
       -----------------------------------------------------------------
       Vorher: Kasten 76px hoch, Eingabe 20px fett, Knoepfe 58px,
       Endungs-Karten 64px mit 18px-Preisen, dazu ein Glanz, der alle
       vier Sekunden ueber das Feld lief.
       Jetzt: eine Suchleiste in der grossen Feldhoehe (48px), Schrift
       16px normal, Karten in Button-Hoehe. Kein Dauer-Effekt.
       ================================================================= */
    #frmDomainHomepage .ultra-domain-section {
        padding-top: var(--hz-space-7) !important;
        padding-bottom: var(--hz-space-7) !important;
    }

    #frmDomainHomepage .ultra-domain-container {
        max-width: 760px !important;
    }

    #frmDomainHomepage .ultra-domain-badge {
        gap: 6px !important;
        margin-bottom: var(--hz-space-3) !important;
        padding: 4px 12px !important;
        border-radius: var(--hz-radius) !important;
        font-size: var(--hz-fs-small) !important;
        font-weight: var(--hz-fw-semibold) !important;
    }

    #frmDomainHomepage .ultra-domain-header h2 {
        margin-bottom: var(--hz-space-5) !important;
    }

    /* Die Leiste: Rahmen und Fokus traegt der Kasten, das Feld darin
       ist durchsichtig. Radius = Radius der Knoepfe + Innenabstand, so
       laufen beide Rundungen parallel. */
    #frmDomainHomepage .ultra-domain-box {
        max-width: 720px !important;
        height: auto !important;
        padding: var(--hz-space-1) !important;
        gap: var(--hz-space-1) !important;
        border: 1px solid var(--hz-line-strong) !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-surface) !important;
        box-shadow: var(--hz-shadow-md) !important;
        transition: var(--hz-transition-color) !important;
    }

    #frmDomainHomepage .ultra-domain-box::after {
        display: none !important;
        animation: none !important;
    }

    #frmDomainHomepage .ultra-domain-box:focus-within {
        border-color: var(--hz-primary) !important;
        box-shadow: var(--hz-shadow-md), var(--hz-focus-ring) !important;
    }

    #frmDomainHomepage .ultra-domain-box input {
        height: var(--hz-h-lg) !important;
        min-height: 0 !important;
        padding: 0 var(--hz-space-4) !important;
        border-radius: var(--hz-radius) !important;
        color: var(--hz-navy) !important;
        font-size: 16px !important;
        font-weight: var(--hz-fw-regular) !important;
    }

    #frmDomainHomepage .ultra-domain-actions {
        height: auto !important;
        gap: var(--hz-space-1) !important;
    }

    #frmDomainHomepage .ultra-domain-actions button {
        width: var(--hz-h-lg) !important;
        min-width: var(--hz-h-lg) !important;
        height: var(--hz-h-lg) !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-primary) !important;
        box-shadow: none !important;
        transition: var(--hz-transition-color) !important;
    }

    /* custom.css hellte die Knoepfe beim Hover zusaetzlich mit einem Filter
       auf - anders als jeder andere rote Knopf der Seite */
    #frmDomainHomepage .ultra-domain-actions button:hover {
        background: var(--hz-primary-hover) !important;
        filter: none !important;
    }

    #frmDomainHomepage .ultra-domain-actions button i {
        color: var(--hz-on-dark) !important;
        font-size: 17px !important;
    }

    /* Endungen: keine Links, also ohne Hover */
    #frmDomainHomepage .ultra-tld-list {
        margin-top: var(--hz-space-5) !important;
        gap: var(--hz-space-3) !important;
    }

    #frmDomainHomepage .ultra-tld-card,
    #frmDomainHomepage .ultra-tld-card:hover {
        min-height: var(--hz-h-lg) !important;
        padding: 8px 14px !important;
        gap: 10px !important;
        border: 1px solid var(--hz-line) !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-surface) !important;
        box-shadow: var(--hz-shadow-sm) !important;
    }

    #frmDomainHomepage .ultra-tld-card img {
        height: 22px !important;
        max-height: 22px !important;
    }

    #frmDomainHomepage .ultra-tld-card span {
        color: var(--hz-navy) !important;
        font-size: var(--hz-fs-body) !important;
        font-weight: var(--hz-fw-semibold) !important;
    }

    #frmDomainHomepage .ultra-domain-pricing-btn {
        gap: 8px !important;
        min-height: var(--hz-h-lg) !important;
        padding: 13px 20px !important;
    }

    /* Der Pfeil zeigt in Leserichtung - im Markup steht der arabische */
    html[dir="ltr"] #frmDomainHomepage .ultra-domain-pricing-btn i {
        transform: scaleX(-1) !important;
    }


    /* =================================================================
       B8  Hinweis "Syrische Domains" und Glocke
       -----------------------------------------------------------------
       Markup: includes/domain-search.tpl. Ein ruhiger weisser Kasten
       statt roter Schrift auf Rosa, das Symbol ohne Verlauf, die Glocke
       ohne Dauer-Wackeln. Auf dem Handy nimmt der Text zwei Zeilen -
       vorher bedeckte der Kasten ein Drittel des Bildschirms.
       ================================================================= */
    .sy-floating-alert {
        width: min(340px, calc(100vw - 32px)) !important;
        gap: var(--hz-space-3) !important;
        padding: var(--hz-space-4) !important;
        border: 1px solid var(--hz-line) !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-surface) !important;
        box-shadow: var(--hz-shadow-lg) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        color: var(--hz-text) !important;
        animation-duration: var(--hz-dur-slow) !important;
    }

    .sy-alert-icon {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-primary-soft) !important;
        box-shadow: none !important;
        color: var(--hz-primary) !important;
        font-size: 17px !important;
    }

    .sy-alert-content strong {
        color: var(--hz-navy) !important;
        font-size: var(--hz-fs-control) !important;
        font-weight: var(--hz-fw-bold) !important;
    }

    .sy-alert-content p {
        color: var(--hz-text) !important;
        font-size: var(--hz-fs-small) !important;
        line-height: 1.5 !important;
    }

    .sy-alert-action {
        min-height: var(--hz-h-sm) !important;
        padding: 6px 12px !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-primary) !important;
        color: var(--hz-on-dark) !important;
        font-size: var(--hz-fs-small) !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 20px !important;
        transition: var(--hz-transition-color) !important;
    }

    .sy-alert-action:hover {
        background: var(--hz-primary-hover) !important;
    }

    .sy-alert-close {
        border-radius: var(--hz-radius) !important;
        background: transparent !important;
        color: var(--hz-muted) !important;
        transition: var(--hz-transition-color) !important;
    }

    .sy-alert-close:hover {
        background: var(--hz-surface-2) !important;
        color: var(--hz-navy) !important;
    }

    .sy-alert-bell {
        width: 44px !important;
        height: 44px !important;
        background: var(--hz-primary) !important;
        box-shadow: var(--hz-shadow-md) !important;
        font-size: 20px !important;
        animation: none !important;
    }

    /* Handy: mittig mit gleichem Rand links und rechts, voller Text,
       unten derselbe Abstand wie am PC (24px, custom.css). Der Chat-Knopf
       unten links liegt darueber (z-index 2000000000) und deckt eine Ecke
       des Kastens ab. Vorher: ab 92px links, rechtsbuendig wirkend, Text
       nach zwei Zeilen abgeschnitten. */
    @media (max-width: 767.98px) {
        .sy-floating-alert {
            right: 12px !important;
            bottom: 24px !important;
            left: 12px !important;
            width: auto !important;
            max-width: 440px !important;
            margin-inline: auto !important;
            padding: var(--hz-space-4) !important;
        }

        .sy-alert-content p {
            font-size: var(--hz-fs-control) !important;
        }

        .sy-alert-bell {
            right: 12px !important;
            bottom: 12px !important;
        }
    }

    /* Tawk.to-Chatknopf so gross wie die Glocke (44px). Tawk setzt Breite,
       Hoehe, Position und transform als Inline-!important in seine Iframes
       (Kreis 60px) - nur zoom laesst es frei. zoom verkleinert Iframe,
       Abstand zum Rand und Klickflaeche gemeinsam. Die Sprechblase ueber
       dem Knopf bekommt denselben Faktor, sonst schwebt sie abgesetzt.
       Die Iframe-IDs wechseln bei jedem Aufruf, #min-widget und
       #chat-bubble bleiben. */
    #min-widget iframe,
    #chat-bubble iframe {
        zoom: calc(44 / 60) !important;
    }

    /* Auf gleicher Hoehe wie die Glocke (unten 24px, auf dem Handy 12px).
       Tawk steht immer 20px ueber dem Rand, nach zoom also 14,67px. translate
       sperrt Tawk nicht; die Laenge wird mitgezoomt, deshalb durch den
       Faktor geteilt. Gleiche Grenze wie die Glocke, damit beide zusammen
       springen. */
    #min-widget iframe,
    #chat-bubble iframe {
        translate: 0 calc(20px - 24px * 60 / 44) !important;
    }

    @media (max-width: 767.98px) {
        #min-widget iframe,
        #chat-bubble iframe {
            translate: 0 calc(20px - 12px * 60 / 44) !important;
        }
    }


    /* =================================================================
       B9  Kopfzeile
       -----------------------------------------------------------------
       Knoepfe (alle Breiten): 40px hoch, Radius md. Warenkorb, Sprache
       und Menue-Knopf halbtransparent auf dem dunklen Grund, Anmelden in
       der Primaerfarbe. Vorher 42-48px mit Radien 13, 15 und 18 und
       einem roten Verlauf mit farbigem Schatten.

       Menueleiste (ab 1200px): Schrift 14.5/600, Hover nur Farbe.

       Kompakt (1200-1535px): angemeldet stehen sieben Menuepunkte und
       "Hallo, Name!" in der Leiste. Das passte erst ab rund 1540px -
       darunter lag das Logo auf "Home" und der Gruss auf dem Warenkorb.
       Deshalb dort: Sprache nur als Flagge, Kundenbereich nur als
       Symbol, Gruss hoechstens 140px breit, kleineres Logo, engere
       Abstaende.
       ================================================================= */
    #header :is(.hz-cart, .hz-lang-btn, .hz-toggle, .hz-login) {
        height: var(--hz-h-md) !important;
        min-height: var(--hz-h-md) !important;
        max-height: var(--hz-h-md) !important;
        border-radius: var(--hz-radius) !important;
        box-shadow: none !important;
        background-image: none !important;
        font-size: var(--hz-fs-control) !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 1 !important;
        transition: var(--hz-transition-color) !important;
    }

    #header :is(.hz-cart, .hz-lang-btn, .hz-toggle) {
        border: 1px solid var(--hz-line-on-dark) !important;
        background-color: rgb(255 255 255 / .06) !important;
        color: var(--hz-on-dark) !important;
    }

    #header :is(.hz-cart, .hz-lang-btn, .hz-toggle):hover,
    #header .hz-lang-dropdown:hover .hz-lang-btn {
        border-color: rgb(255 255 255 / .22) !important;
        background-color: rgb(255 255 255 / .12) !important;
        color: var(--hz-on-dark) !important;
    }

    #header .hz-login {
        border: 1px solid var(--hz-primary) !important;
        background-color: var(--hz-primary) !important;
        color: var(--hz-on-dark) !important;
    }

    #header .hz-login:hover {
        border-color: var(--hz-primary-hover) !important;
        background-color: var(--hz-primary-hover) !important;
    }

    #header :is(.hz-cart, .hz-toggle) {
        width: var(--hz-h-md) !important;
        min-width: var(--hz-h-md) !important;
    }

    #header .hz-lang-btn {
        gap: var(--hz-space-2) !important;
        padding: 0 var(--hz-space-3) !important;
    }

    #header .hz-lang-btn i {
        font-size: 11px !important;
    }

    /* Zaehler am Warenkorb */
    #header .hz-cart span {
        top: -6px !important;
        right: -6px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-primary) !important;
        box-shadow: 0 0 0 2px var(--hz-navy-900) !important;
        font-size: 11px !important;
        font-weight: var(--hz-fw-bold) !important;
        line-height: 18px !important;
    }

    @media (min-width: 992px) {
        #header .hz-login {
            gap: var(--hz-space-2) !important;
            padding: 0 var(--hz-space-4) !important;
        }
    }

    @media (min-width: 1200px) {
        #header .container {
            padding-right: var(--hz-space-5) !important;
            padding-left: var(--hz-space-5) !important;
        }

        #header .hz-inner {
            grid-template-columns: auto minmax(0, 1fr) auto !important;
            column-gap: var(--hz-space-5) !important;
        }

        #header .hz-logo img {
            max-height: 32px !important;
        }

        /* safe center: ist die Leiste zu breit, laeuft sie nach hinten
           ueber statt nach beiden Seiten - nie ueber das Logo. */
        #header .hz-nav {
            min-width: 0 !important;
            gap: var(--hz-space-5) !important;
            justify-content: center !important;
            justify-content: safe center !important;
        }

        #header .hz-menu,
        #header .hz-menu-account {
            gap: var(--hz-space-5) !important;
        }

        #header .hz-menu > li {
            margin: 0 !important;
        }

        #header .hz-menu > li > a {
            gap: 6px !important;
            padding: 8px 0 !important;
            color: rgb(255 255 255 / .86) !important;
            font-size: var(--hz-fs-control) !important;
            font-weight: var(--hz-fw-semibold) !important;
            letter-spacing: normal !important;
            transition: color var(--hz-dur-fast) var(--hz-ease) !important;
        }

        #header .hz-menu > li:is(:hover, .show, .open) > a {
            color: var(--hz-primary-on-dark) !important;
        }

        #header .hz-actions {
            gap: var(--hz-space-2) !important;
        }
    }

    /* Kompakt gilt nur angemeldet: header.tpl setzt dann .is-loggedin am
       Kundenbereich-Knopf. Abgemeldet stehen drei Menuepunkte in der
       Leiste, die passen auch bei 1200px in voller Groesse.
       Stufe 1 (bis 1679px): Sprache als Flagge, Kundenbereich als
       Symbol, Gruss hoechstens 140px, kleineres Logo, engere Abstaende. */
    @media (min-width: 1200px) and (max-width: 1679.98px) {
        #header:has(.is-loggedin) .container {
            padding-right: var(--hz-space-4) !important;
            padding-left: var(--hz-space-4) !important;
        }

        #header:has(.is-loggedin) .hz-inner {
            column-gap: var(--hz-space-4) !important;
        }

        #header:has(.is-loggedin) .hz-logo img {
            max-height: 26px !important;
        }

        #header:has(.is-loggedin) :is(.hz-nav, .hz-menu, .hz-menu-account) {
            gap: var(--hz-space-4) !important;
        }

        #header:has(.is-loggedin) :is(.hz-lang-btn, .hz-login) span {
            display: none !important;
        }

        #header:has(.is-loggedin) .hz-lang-btn {
            padding: 0 var(--hz-space-2) !important;
        }

        #header .hz-login.is-loggedin {
            justify-content: center !important;
            width: var(--hz-h-md) !important;
            min-width: var(--hz-h-md) !important;
            padding: 0 !important;
        }

        /* Gruss: abgeschnitten mit ..., der Pfeil bleibt sichtbar */
        #header:has(.is-loggedin) .hz-menu-account > li > a.dropdown-toggle {
            display: block !important;
            position: relative !important;
            max-width: 140px !important;
            overflow: hidden !important;
            padding-inline-end: 14px !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }

        #header:has(.is-loggedin) .hz-menu-account > li > a.dropdown-toggle::after {
            position: absolute !important;
            top: 50% !important;
            inset-inline-end: 0 !important;
            margin: -2px 0 0 !important;
        }
    }

    /* Stufe 2 (bis 1439px): zusaetzlich der Gruss nur als Symbol und
       noch etwas engere Abstaende. Das Konto-Menue klappt weiter auf. */
    @media (min-width: 1200px) and (max-width: 1439.98px) {
        #header:has(.is-loggedin) :is(.hz-nav, .hz-menu, .hz-menu-account) {
            gap: var(--hz-space-3) !important;
        }

        #header:has(.is-loggedin) .hz-menu-account > li > a.dropdown-toggle {
            max-width: none !important;
            font-size: 0 !important;
        }

        #header:has(.is-loggedin) .hz-menu-account > li > a.dropdown-toggle::before {
            content: "\f007" !important;
            display: inline-block !important;
            font: 400 16px/1 "Font Awesome 6 Pro", "Font Awesome 6 Free" !important;
            vertical-align: middle !important;
        }

        /* Der Pfeil ist aus Raendern in em gebaut - bei font-size 0
           waere er weg, deshalb feste Werte */
        #header:has(.is-loggedin) .hz-menu-account > li > a.dropdown-toggle::after {
            border-width: 5px 4px 0 !important;
        }
    }


    /* =================================================================
       B10  Karten-Vorlage
       -----------------------------------------------------------------
       Kaesten mit Inhalt: Radius lg, kleiner Schatten. Sie sind keine
       Links, also reagieren sie nicht auf die Maus - der Hover-Zustand
       ist derselbe wie der Ruhezustand. Vorher hob jede Kartenart ihren
       Schatten anders an (bis 0 28px 60px), einige wuchsen dabei.

       Karten, die als Ganzes ein Link sind, stehen unten in der zweiten
       Liste: sie bekommen beim Hover nur einen dunkleren Rand.
       ================================================================= */
    :where(.ultra-ssl-card, .pro-ssl-card, .hp-presence-card, .pro-testimonial-card,
           .payment-card, .why-floating__card, .hosting-feature-item, .hp-domain-step,
           .domain-promo-box, .price-table, .kb-popular-card, .kb-list-card,
           .ann-modern-card, .contact-modern-card, .ticket-modern-card, .horanos-card,
           .clean-hosting-card, .hp-browser, .dp-pricing-panel, .horanos-reset-card,
           .legal-page, .card),
    :where(.ultra-ssl-card, .pro-ssl-card, .hp-presence-card, .pro-testimonial-card,
           .payment-card, .why-floating__card, .hosting-feature-item, .hp-domain-step,
           .domain-promo-box, .price-table, .kb-popular-card, .kb-list-card,
           .ann-modern-card, .contact-modern-card, .ticket-modern-card, .horanos-card,
           .clean-hosting-card, .hp-browser, .dp-pricing-panel, .horanos-reset-card,
           .legal-page, .card):hover {
        border-radius: var(--hz-radius) !important;
        box-shadow: var(--hz-shadow-sm) !important;
    }

    /* =================================================================
       B11  Tipp-Ziele auf dem Handy
       -----------------------------------------------------------------
       Mindestens 36px hoch. Die Links in den Footer-Spalten waren 22px
       hoch und lagen dicht untereinander - auf dem Handy traf man leicht
       den Nachbarn. Der Abstand zwischen den Zeilen steckt jetzt in der
       Hoehe des Links selbst, deshalb faellt der Aussenabstand weg.
       ================================================================= */
    @media (max-width: 767.98px) {
        .site-footer .footer-col ul li {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .site-footer .footer-col ul li a {
            display: inline-flex !important;
            align-items: center !important;
            min-height: 36px !important;
        }

        #header .hz-logo {
            justify-content: center !important;
            min-width: 36px !important;
            min-height: 36px !important;
        }
    }

    /* =================================================================
       B12  Kundenbereich
       -----------------------------------------------------------------
       Befunde aus der Pruefung mit Anmeldung (13.09.2026).
       ================================================================= */

    /* "Generate Password" steht in einer col-xl-3 (rund 174px). Mit dem
       normalen Innenabstand passte der Text nicht und brach um - der
       Knopf war 60px hoch neben 40px hohen Feldern. */
    .generate-password.btn-block {
        padding-inline: var(--hz-space-3) !important;
        white-space: nowrap !important;
    }

    /* Hinweis "Bitte E-Mail bestaetigen": der Text stand in Staerke 300,
       die das Design-System nicht kennt. */
    .email-verification .text {
        font-weight: var(--hz-fw-regular) !important;
    }

    /* Startseite, Box "Register a New Domain": Feld, "Register" und
       "Transfer" standen in einer Zeile. Die Box ist am PC rund 395px
       breit - die beiden 40px hohen Knoepfe nahmen 193px, fuer das Feld
       blieben 153px. Das Feld steht jetzt ueber die volle Breite, die
       Knoepfe klein und einzeln darunter. Das Markup kommt aus dem
       WHMCS-Kern (ClientAreaHomepagePanels), nicht aus einer Vorlage. */
    #registerDomainPanel .input-group {
        flex-wrap: wrap !important;
        gap: var(--hz-space-2) !important;
    }

    #registerDomainPanel .input-group > .form-control {
        flex: 1 0 100% !important;
        border-radius: var(--hz-radius) !important;
    }

    #registerDomainPanel .input-group > .input-group-append {
        margin-left: 0 !important;
        gap: var(--hz-space-2) !important;
    }

    #registerDomainPanel .input-group-append > .btn {
        min-height: var(--hz-h-sm) !important;
        margin-left: 0 !important;
        padding: 5px 12px !important;
        border-radius: var(--hz-radius) !important;
        font-size: var(--hz-fs-small) !important;
    }

    /* Sammelaktionen ueber der Domainliste: einzelne Knoepfe mit eigenem
       Radius statt einer verbundenen Gruppe, mit 12px Luft dazwischen.
       Auf dem Handy waren vier Knoepfe in einer Zeile 16px breiter als
       der Schirm, "More..." war angeschnitten - sie brechen deshalb um.
       Die Raender aus Bootstrap (-1px) und theme.min.css (.btn-group
       margin-right:6px) werden auf allen Seiten genullt, damit in RTL
       nichts zum Abstand dazukommt. */
    #domainForm > .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--hz-space-3) !important;
    }

    #domainForm > .btn-group > .btn,
    #domainForm > .btn-group > .btn-group,
    #domainForm > .btn-group > .btn-group > .btn {
        margin: 0 !important;
    }

    #domainForm > .btn-group > .btn,
    #domainForm > .btn-group > .btn-group > .btn {
        border-radius: var(--hz-radius) !important;
    }

    @media (max-width: 767.98px) {

        /* Listen-Tabellen (Angebote, SSL): die Spaltenkoepfe mit
           Sortierpfeil machten die Tabelle bis zu 19px breiter als den
           Inhaltsbereich. Sie scrollen jetzt in ihrem eigenen Kasten,
           statt die ganze Seite seitlich zu verschieben. */
        .dataTables_wrapper .listtable {
            overflow-x: auto !important;
        }

        /* Schliessen-Kreuz des E-Mail-Hinweises war 33x28 */
        #btnEmailVerificationClose {
            min-width: var(--hz-h-md) !important;
            min-height: var(--hz-h-md) !important;
        }
    }

    /* =================================================================
       B13  Plankarten und Laufzeit-Leiste
       -----------------------------------------------------------------
       Der Kopf mit dem Plannamen ("Starter", "Business") hatte die Farbe
       des Seitengrunds und hob sich kaum von ihm ab. Die Leiste "Choose
       the subscription period" war eine Pille mit einem eckigeren Feld
       darin - beide haben jetzt denselben Radius.
       ================================================================= */
    #products.price-table-container .price-table .top-head {
        border-bottom: 1px solid var(--hz-line) !important;
        background: var(--hz-surface-3) !important;
    }

    #products.price-table-container .billing-switcher {
        border-radius: var(--hz-radius) !important;
    }

    /* =================================================================
       B14  Seitenzahlen
       -----------------------------------------------------------------
       Zwei Arten auf der Seite: DataTables (Domainpreise, Kundenbereich)
       36px mit Hover, Wissensdatenbank 44px ohne Hover. Jetzt eine Form.
       ================================================================= */
    .pagination {
        gap: var(--hz-space-1) !important;
    }

    .pagination .page-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: var(--hz-h-sm) !important;
        height: var(--hz-h-sm) !important;
        min-height: var(--hz-h-sm) !important;
        margin: 0 !important;
        padding: 0 var(--hz-space-3) !important;
        border: 1px solid var(--hz-line) !important;
        border-radius: var(--hz-radius) !important;
        background: var(--hz-surface) !important;
        box-shadow: none !important;
        color: var(--hz-navy) !important;
        font-size: var(--hz-fs-small) !important;
        font-weight: var(--hz-fw-semibold) !important;
        line-height: 1 !important;
        transition: var(--hz-transition-color) !important;
    }

    .pagination .page-item:not(.active, .disabled) .page-link:hover {
        border-color: var(--hz-line-hover) !important;
        background: var(--hz-surface-2) !important;
        color: var(--hz-primary) !important;
    }

    .pagination .page-item.active .page-link {
        border-color: var(--hz-primary) !important;
        background: var(--hz-primary) !important;
        color: var(--hz-on-dark) !important;
    }

    .pagination .page-item.disabled .page-link {
        color: var(--hz-muted) !important;
        opacity: .6 !important;
    }

    @media (max-width: 767.98px) {
        .pagination .page-link {
            min-width: var(--hz-h-md) !important;
            height: var(--hz-h-md) !important;
            min-height: var(--hz-h-md) !important;
        }
    }

    /* Endungs-Filter (Domainpreise, Domain registrieren): Hover nur Farbe,
       ohne aufsteigenden Schatten */
    :is(.domain-pricing-modern .dp-filters, #order-standard_cart .tld-filters) a:is(:hover, .badge-success) {
        box-shadow: none !important;
    }

    /* Ganze Karte als Link */
    :where(a.kb-category-card, a.list-group-item.kb-article-item, a.hz-card-link) {
        transition: var(--hz-transition-color) !important;
    }

    :where(a.kb-category-card, a.hz-card-link):hover {
        border-color: var(--hz-line-hover) !important;
        box-shadow: var(--hz-shadow-sm) !important;
    }

    /* =================================================================
       B15  Ein Radius auch fuer fremde Bauteile
       -----------------------------------------------------------------
       Bootstrap, das Bestellformular und die Webhosting-Seite (Stil kommt
       vom Server, nicht aus dem Theme) bringen eigene Rundungen mit:
       3px, 4px, 18px, 22px, 32px. Hier auf --hz-radius gebracht.
       Kreise (50%) und die Tabellen im Handy-Kartenbild bleiben.
       ================================================================= */
    :is(.premium-hosting-hero, .plans-trust, .plans-badge, .clean-panel-body,
        .clean-metric-card, .clean-info-row, #domainSuggestions, #producttotal,
        #orderSummary .summary-container, .label) {
        border-radius: var(--hz-radius) !important;
    }

    .featured-tld .price {
        border-end-start-radius: var(--hz-radius) !important;
        border-end-end-radius: var(--hz-radius) !important;
    }

    /* Tabellen: aussen rund, die Eckzellen folgen. :where haelt die
       Spezifitaet klein, damit das Handy-Kartenbild unten gewinnt. */
    table:where(.table-list, #tableDomainPricing) {
        border-radius: var(--hz-radius) !important;
    }

    table:where(.table-list, #tableDomainPricing) > thead > tr:first-child > :first-child {
        border-start-start-radius: var(--hz-radius) !important;
    }

    table:where(.table-list, #tableDomainPricing) > thead > tr:first-child > :last-child {
        border-start-end-radius: var(--hz-radius) !important;
    }

    table:where(.table-list, #tableDomainPricing) > tbody > tr:last-child > :first-child {
        border-end-start-radius: var(--hz-radius) !important;
    }

    table:where(.table-list, #tableDomainPricing) > tbody > tr:last-child > :last-child {
        border-end-end-radius: var(--hz-radius) !important;
    }

    /* Handy: Kundenbereich-Tabellen werden zu Karten (custom.css) - deren
       Rundungen gelten, nicht die der Tabelle */
    @media (max-width: 767px) {
        table.table-list.hz-mobile-cards,
        table.table-list.hz-mobile-cards > thead > tr > *,
        table.table-list.hz-mobile-cards > tbody > tr > * {
            border-radius: revert-layer !important;
        }
    }

    /* Listen am Kartenrand: Ecken der Karte (Rahmen abgezogen).
       Seitenleisten ausgenommen - dort liegen die Zeilen mit Abstand im
       Kasten (B16). */
    .card:not(.card-sidebar) > .list-group:first-child,
    .card:not(.card-sidebar) > .list-group:first-child > .list-group-item:first-child {
        border-start-start-radius: calc(var(--hz-radius) - 1px) !important;
        border-start-end-radius: calc(var(--hz-radius) - 1px) !important;
    }

    .card:not(.card-sidebar) > .list-group:last-child,
    .card:not(.card-sidebar) > .list-group:last-child > .list-group-item:last-child {
        border-end-start-radius: calc(var(--hz-radius) - 1px) !important;
        border-end-end-radius: calc(var(--hz-radius) - 1px) !important;
    }

    .list-group:not(.list-group-flush) > .list-group-item:first-child {
        border-start-start-radius: var(--hz-radius) !important;
        border-start-end-radius: var(--hz-radius) !important;
    }

    .list-group:not(.list-group-flush) > .list-group-item:last-child {
        border-end-start-radius: var(--hz-radius) !important;
        border-end-end-radius: var(--hz-radius) !important;
    }

    /* =================================================================
       B16  Seitenleisten-Menues wie die Dropdown-Vorlage (B5)
       -----------------------------------------------------------------
       Die Listen in den Seitenleisten-Karten ("Categories", "Actions",
       Kundenbereich, Konto-Kasten) sind Menues. Sie bekommen dieselben
       Zeilen und Farben wie die Dropdowns: kein Rahmen, keine
       Trennlinien, Hover hellgrau mit roter Schrift, aktiver Eintrag
       zartrot. Vorher hatte jede Seitenleiste ein eigenes Bild (rote
       Vollflaeche beim Hover, roter Verlauf fuer den aktiven Eintrag).

       Zeilen ohne Ziel (Hinweistext in includes/sidebar.tpl) bekommen
       nur Polster und Schrift, keinen Hover und kein Flex - ihr Badge
       schwebt per float.

       Auf .card.card-sidebar, damit die Ecken-Regeln aus B15 hier nicht
       greifen: die Zeilen liegen mit Abstand im Kasten, alle Ecken sind
       gleich rund.
       ================================================================= */

    .card.card-sidebar .list-group {
        gap: var(--hz-dd-gap) !important;
        padding: var(--hz-dd-pad) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .card.card-sidebar .list-group > .list-group-item {
        margin: 0 !important;
        padding: 8px var(--hz-dd-item-px) !important;
        border: 0 !important;
        border-radius: var(--hz-dd-item-radius) !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--hz-dd-item-color) !important;
        font-family: var(--hz-font) !important;
        font-size: var(--hz-dd-item-fs) !important;
        font-weight: var(--hz-fw-regular) !important;
        line-height: 20px !important;
        text-align: start !important;
        text-decoration: none !important;
        overflow-wrap: anywhere;
        transform: none !important;
        transition: var(--hz-transition-color) !important;
    }

    .card.card-sidebar .list-group > :is(a, button).list-group-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: var(--hz-dd-item-h) !important;
        cursor: pointer;
    }

    /* Trennlinien der Warenkorb-Seitenleiste */
    .card.card-sidebar .list-group > .list-group-item::after {
        content: none !important;
    }

    .card.card-sidebar .list-group > :is(a, button).list-group-item:not(.active):is(:hover, :focus-visible) {
        background: var(--hz-dd-item-hover-bg) !important;
        color: var(--hz-dd-item-hover-color) !important;
        outline: 0 !important;
    }

    .card.card-sidebar .list-group > .list-group-item.active {
        background: var(--hz-dd-item-active-bg) !important;
        color: var(--hz-dd-item-active-color) !important;
        font-weight: var(--hz-fw-semibold) !important;
    }

    .card.card-sidebar .list-group > .list-group-item.disabled {
        opacity: .45 !important;
        pointer-events: none !important;
    }

    /* Schrift und Symbole folgen immer der Zeile */
    .card.card-sidebar .list-group > .list-group-item :is(a, i, .sidebar-menu-item-label, .sidebar-menu-item-icon) {
        color: inherit !important;
    }

    .card.card-sidebar .sidebar-menu-item-wrapper {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .card.card-sidebar .list-group > :is(a, button).list-group-item > i,
    .card.card-sidebar .sidebar-menu-item-icon {
        flex: 0 0 16px !important;
        width: 16px !important;
        margin: 0 !important;
        text-align: center !important;
        opacity: .7;
    }

    /* Zahl-Badge auf dem zartroten aktiven Eintrag: weiss statt
       durchsichtig-weiss (das war fuer den roten Verlauf gedacht) */
    .card.card-sidebar .list-group > .list-group-item.active :is(.badge, .label) {
        background: var(--hz-surface) !important;
        color: var(--hz-primary) !important;
    }

    .card.card-sidebar .hz-account-list__divider {
        height: 0 !important;
        margin: var(--hz-dd-pad) 0 !important;
        border-top: 1px solid var(--hz-dd-divider) !important;
    }
}