/* ============================================================
golive-system-pages.css
Reef-Skin für JTL-NOVA-System-Seiten:
Warenkorb · Checkout · Bestellbestätigung · Kundenkonto ·
Login/Registrierung · Merkliste
⚠️ KEIN HTML-Replacement. Die NOVA-Templates für diese Seiten
bleiben unberührt (Shop-Logik!). Diese Datei liefert NUR
Style-Overrides, scoped auf die NOVA-Body-Klassen plus eine
HawaiiCards-Zusatzklasse, die Marcel in header.tpl basierend
auf nLinkart/nSeite setzt:
body.basket.hc-cart — Warenkorb
body.checkout.hc-checkout — Checkout
body.confirmation.hc-conf — Bestellbestätigung
body.account.hc-acct — Kundenkonto
body.login.hc-auth — Login
body.registration.hc-auth — Registrierung
body.wishlist.hc-wl — Merkliste
Token-Quelle: brand-book.html / styles.css (`var(--*)`).
Day/Night via `data-theme="reef|midnight|sunset"` am .
Keine Hex-Hardcodes; keine `!important`-Bombing — Spezifität
reicht über Body-Klassen.
Einbau:
in header.tpl NACH styles.css/layout.css/hawaiicards.css.
============================================================ */
/* ============================================================
§0 — Layout-Fix: NOVA-Container zentrieren + Innenabstand
NOVAs .container setzt max-width (1250px ab 1300px-VW), aber
KEIN auto-margin → Inhalt klebte links. Hier scoped zentriert
+ dezenter Innenabstand, ohne Shop-Logik/Templates anzufassen.
Spezifität (0,2,1) schlägt NOVA (0,1,0) — kein !important.
============================================================ */
body.hc-cart main .container, body.hc-news main .container, body.hc-checkout main .container,
body.hc-conf main .container, body.hc-acct main .container,
body.hc-auth main .container, body.hc-wl main .container {
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
body.hc-cart main, body.hc-news main, body.hc-checkout main,
body.hc-conf main, body.hc-acct main,
body.hc-auth main, body.hc-wl main {
padding-top: 28px;
padding-bottom: 56px;
}
/* ============================================================
§1 — Shared base: alle 6 Scopes
Hintergrund, Schrift-Stack, Text-Farben, Heading-Familie.
============================================================ */
body.hc-cart, body.hc-news, body.hc-checkout, body.hc-conf,
body.hc-acct, body.hc-auth, body.hc-wl {
background: var(--bg);
background-image: var(--bg-grad);
background-attachment: fixed;
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
body.hc-cart main h1, body.hc-news main h1, body.hc-checkout main h1, body.hc-conf main h1,
body.hc-acct main h1, body.hc-auth main h1, body.hc-wl main h1,
body.hc-cart main h2, body.hc-news main h2, body.hc-checkout main h2, body.hc-conf main h2,
body.hc-acct main h2, body.hc-auth main h2, body.hc-wl main h2,
body.hc-cart main h3, body.hc-news main h3, body.hc-checkout main h3, body.hc-conf main h3,
body.hc-acct main h3, body.hc-auth main h3, body.hc-wl main h3,
body.hc-cart main h4, body.hc-news main h4, body.hc-checkout main h4, body.hc-conf main h4,
body.hc-acct main h4, body.hc-auth main h4, body.hc-wl main h4,
body.hc-cart main .h1, body.hc-news main .h1, body.hc-checkout main .h1, body.hc-conf main .h1,
body.hc-acct main .h1, body.hc-auth main .h1, body.hc-wl main .h1,
body.hc-cart main .h2, body.hc-news main .h2, body.hc-checkout main .h2, body.hc-conf main .h2,
body.hc-acct main .h2, body.hc-auth main .h2, body.hc-wl main .h2 {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -.015em;
color: var(--text);
}
body.hc-cart main a, body.hc-news main a, body.hc-checkout main a, body.hc-conf main a,
body.hc-acct main a, body.hc-auth main a, body.hc-wl main a {
color: var(--primary);
text-decoration: none;
}
body.hc-cart main a:hover, body.hc-news main a:hover, body.hc-checkout main a:hover, body.hc-conf main a:hover,
body.hc-acct main a:hover, body.hc-auth main a:hover, body.hc-wl main a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
body.hc-cart main hr, body.hc-news main hr, body.hc-checkout main hr, body.hc-conf main hr,
body.hc-acct main hr, body.hc-auth main hr, body.hc-wl main hr {
border: none;
border-top: 1px solid var(--border-soft);
margin: 24px 0;
}
/* ============================================================
§2 — Cards / Panels / Container
NOVA verwendet .card, .panel, .box, .well, .alert je nach Seite.
Wir stylen die häufigsten Container-Klassen einheitlich.
============================================================ */
body.hc-cart main .card, body.hc-news main .card, body.hc-checkout main .card,
body.hc-conf main .card, body.hc-acct main .card,
body.hc-auth main .card, body.hc-wl main .card,
body.hc-cart main .panel, body.hc-news main .panel, body.hc-checkout main .panel,
body.hc-conf main .panel, body.hc-acct main .panel,
body.hc-auth main .panel, body.hc-wl main .panel,
body.hc-cart main .box, body.hc-news main .box, body.hc-checkout main .box,
body.hc-conf main .box, body.hc-acct main .box,
body.hc-auth main .box, body.hc-wl main .box,
body.hc-cart main .well, body.hc-news main .well, body.hc-checkout main .well,
body.hc-conf main .well, body.hc-acct main .well,
body.hc-auth main .well, body.hc-wl main .well {
background: var(--card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: 0 14px 40px -28px rgba(0,0,0,.18);
color: var(--text);
}
body.hc-cart main .card-header, body.hc-news main .card-header, body.hc-checkout main .card-header,
body.hc-conf main .card-header, body.hc-acct main .card-header,
body.hc-auth main .card-header, body.hc-wl main .card-header,
body.hc-cart main .panel-heading, body.hc-news main .panel-heading, body.hc-checkout main .panel-heading,
body.hc-conf main .panel-heading, body.hc-acct main .panel-heading,
body.hc-auth main .panel-heading, body.hc-wl main .panel-heading {
background: var(--card-hi);
border-bottom: 1px solid var(--border-soft);
border-radius: var(--r-lg) var(--r-lg) 0 0;
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
}
/* ============================================================
§3 — Buttons
NOVA: .btn .btn-primary .btn-secondary .btn-success .btn-link
============================================================ */
body.hc-cart main .btn, body.hc-news main .btn, body.hc-checkout main .btn,
body.hc-conf main .btn, body.hc-acct main .btn,
body.hc-auth main .btn, body.hc-wl main .btn {
font-family: var(--font-body);
font-weight: 700;
font-size: 14.5px;
letter-spacing: .01em;
border-radius: var(--r-pill);
border: none;
padding: 12px 22px;
transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s;
cursor: pointer;
}
body.hc-cart main .btn:active, body.hc-news main .btn:active, body.hc-checkout main .btn:active,
body.hc-conf main .btn:active, body.hc-acct main .btn:active,
body.hc-auth main .btn:active, body.hc-wl main .btn:active { transform: translateY(1px) scale(.99); }
body.hc-cart main .btn-primary, body.hc-news main .btn-primary, body.hc-checkout main .btn-primary,
body.hc-conf main .btn-primary, body.hc-acct main .btn-primary,
body.hc-auth main .btn-primary, body.hc-wl main .btn-primary,
body.hc-cart main .btn-success, body.hc-news main .btn-success, body.hc-checkout main .btn-success,
body.hc-conf main .btn-success, body.hc-acct main .btn-success,
body.hc-auth main .btn-success, body.hc-wl main .btn-success {
background: var(--primary);
color: var(--primary-ink);
box-shadow: var(--glow);
}
body.hc-cart main .btn-primary:hover, body.hc-news main .btn-primary:hover, body.hc-checkout main .btn-primary:hover,
body.hc-conf main .btn-primary:hover, body.hc-acct main .btn-primary:hover,
body.hc-auth main .btn-primary:hover, body.hc-wl main .btn-primary:hover,
body.hc-cart main .btn-success:hover, body.hc-news main .btn-success:hover, body.hc-checkout main .btn-success:hover,
body.hc-conf main .btn-success:hover, body.hc-acct main .btn-success:hover,
body.hc-auth main .btn-success:hover, body.hc-wl main .btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px var(--primary), 0 22px 50px -16px var(--primary);
text-decoration: none;
}
body.hc-cart main .btn-secondary, body.hc-news main .btn-secondary, body.hc-checkout main .btn-secondary,
body.hc-conf main .btn-secondary, body.hc-acct main .btn-secondary,
body.hc-auth main .btn-secondary, body.hc-wl main .btn-secondary,
body.hc-cart main .btn-default, body.hc-news main .btn-default, body.hc-checkout main .btn-default,
body.hc-conf main .btn-default, body.hc-acct main .btn-default,
body.hc-auth main .btn-default, body.hc-wl main .btn-default {
background: transparent;
color: var(--text);
box-shadow: inset 0 0 0 1.5px var(--border);
}
body.hc-cart main .btn-secondary:hover, body.hc-news main .btn-secondary:hover, body.hc-checkout main .btn-secondary:hover,
body.hc-conf main .btn-secondary:hover, body.hc-acct main .btn-secondary:hover,
body.hc-auth main .btn-secondary:hover, body.hc-wl main .btn-secondary:hover,
body.hc-cart main .btn-default:hover, body.hc-news main .btn-default:hover, body.hc-checkout main .btn-default:hover,
body.hc-conf main .btn-default:hover, body.hc-acct main .btn-default:hover,
body.hc-auth main .btn-default:hover, body.hc-wl main .btn-default:hover {
box-shadow: inset 0 0 0 1.5px var(--primary);
color: var(--primary);
text-decoration: none;
}
body.hc-cart main .btn-link, body.hc-news main .btn-link, body.hc-checkout main .btn-link,
body.hc-conf main .btn-link, body.hc-acct main .btn-link,
body.hc-auth main .btn-link, body.hc-wl main .btn-link {
background: transparent;
color: var(--primary);
padding: 6px 8px;
box-shadow: none;
}
body.hc-cart main .btn-link:hover, body.hc-news main .btn-link:hover, body.hc-checkout main .btn-link:hover,
body.hc-conf main .btn-link:hover, body.hc-acct main .btn-link:hover,
body.hc-auth main .btn-link:hover, body.hc-wl main .btn-link:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
body.hc-cart main .btn-danger, body.hc-news main .btn-danger, body.hc-checkout main .btn-danger,
body.hc-conf main .btn-danger, body.hc-acct main .btn-danger,
body.hc-auth main .btn-danger, body.hc-wl main .btn-danger {
background: var(--hot-2);
color: #fff;
}
/* ============================================================
§4 — Form-Inputs
Bootstrap-3-Erbe in NOVA: .form-control, .form-group,
.input-group, .has-error, .checkbox, .radio
============================================================ */
body.hc-cart main .form-control, body.hc-news main .form-control, body.hc-checkout main .form-control,
body.hc-conf main .form-control, body.hc-acct main .form-control,
body.hc-auth main .form-control, body.hc-wl main .form-control,
body.hc-cart main input[type="text"], body.hc-news main input[type="text"], body.hc-checkout main input[type="text"],
body.hc-conf main input[type="text"], body.hc-acct main input[type="text"],
body.hc-auth main input[type="text"], body.hc-wl main input[type="text"],
body.hc-cart main input[type="email"], body.hc-news main input[type="email"], body.hc-checkout main input[type="email"],
body.hc-conf main input[type="email"], body.hc-acct main input[type="email"],
body.hc-auth main input[type="email"], body.hc-wl main input[type="email"],
body.hc-cart main input[type="tel"], body.hc-news main input[type="tel"], body.hc-checkout main input[type="tel"],
body.hc-conf main input[type="tel"], body.hc-acct main input[type="tel"],
body.hc-auth main input[type="tel"], body.hc-wl main input[type="tel"],
body.hc-cart main input[type="password"], body.hc-news main input[type="password"], body.hc-checkout main input[type="password"],
body.hc-conf main input[type="password"], body.hc-acct main input[type="password"],
body.hc-auth main input[type="password"], body.hc-wl main input[type="password"],
body.hc-cart main input[type="number"], body.hc-news main input[type="number"], body.hc-checkout main input[type="number"],
body.hc-conf main input[type="number"], body.hc-acct main input[type="number"],
body.hc-auth main input[type="number"], body.hc-wl main input[type="number"],
body.hc-cart main select, body.hc-news main select, body.hc-checkout main select,
body.hc-conf main select, body.hc-acct main select,
body.hc-auth main select, body.hc-wl main select,
body.hc-cart main textarea, body.hc-news main textarea, body.hc-checkout main textarea,
body.hc-conf main textarea, body.hc-acct main textarea,
body.hc-auth main textarea, body.hc-wl main textarea {
background: var(--surface);
color: var(--text);
border: 1.5px solid var(--border);
border-radius: var(--r-md);
padding: 10px 14px;
font-family: var(--font-body);
font-size: 14.5px;
height: auto;
box-shadow: none;
transition: border-color .18s var(--ease), box-shadow .22s var(--ease);
}
body.hc-cart main .form-control:focus, body.hc-news main .form-control:focus, body.hc-checkout main .form-control:focus,
body.hc-conf main .form-control:focus, body.hc-acct main .form-control:focus,
body.hc-auth main .form-control:focus, body.hc-wl main .form-control:focus,
body.hc-cart main input:focus, body.hc-news main input:focus, body.hc-checkout main input:focus,
body.hc-conf main input:focus, body.hc-acct main input:focus,
body.hc-auth main input:focus, body.hc-wl main input:focus,
body.hc-cart main select:focus, body.hc-news main select:focus, body.hc-checkout main select:focus,
body.hc-conf main select:focus, body.hc-acct main select:focus,
body.hc-auth main select:focus, body.hc-wl main select:focus,
body.hc-cart main textarea:focus, body.hc-news main textarea:focus, body.hc-checkout main textarea:focus,
body.hc-conf main textarea:focus, body.hc-acct main textarea:focus,
body.hc-auth main textarea:focus, body.hc-wl main textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
body.hc-cart main label, body.hc-news main label, body.hc-checkout main label,
body.hc-conf main label, body.hc-acct main label,
body.hc-auth main label, body.hc-wl main label,
body.hc-cart main .control-label, body.hc-news main .control-label, body.hc-checkout main .control-label,
body.hc-conf main .control-label, body.hc-acct main .control-label,
body.hc-auth main .control-label, body.hc-wl main .control-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--text);
margin-bottom: 6px;
}
body.hc-cart main .form-group.has-error .form-control, body.hc-news main .form-group.has-error .form-control,
body.hc-checkout main .form-group.has-error .form-control,
body.hc-conf main .form-group.has-error .form-control,
body.hc-acct main .form-group.has-error .form-control,
body.hc-auth main .form-group.has-error .form-control,
body.hc-wl main .form-group.has-error .form-control {
border-color: var(--hot-2);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--hot-2) 18%, transparent);
}
body.hc-cart main .help-block, body.hc-news main .help-block, body.hc-checkout main .help-block,
body.hc-conf main .help-block, body.hc-acct main .help-block,
body.hc-auth main .help-block, body.hc-wl main .help-block {
font-size: 12.5px;
color: var(--muted);
margin-top: 6px;
}
/* checkbox + radio: aufgeräumte runde Style, ohne native Look */
body.hc-cart main input[type="checkbox"], body.hc-news main input[type="checkbox"], body.hc-checkout main input[type="checkbox"],
body.hc-conf main input[type="checkbox"], body.hc-acct main input[type="checkbox"],
body.hc-auth main input[type="checkbox"], body.hc-wl main input[type="checkbox"],
body.hc-cart main input[type="radio"], body.hc-news main input[type="radio"], body.hc-checkout main input[type="radio"],
body.hc-conf main input[type="radio"], body.hc-acct main input[type="radio"],
body.hc-auth main input[type="radio"], body.hc-wl main input[type="radio"] {
accent-color: var(--primary);
width: 18px;
height: 18px;
margin-right: 8px;
vertical-align: middle;
}
/* ============================================================
§5 — Tabellen
NOVA: .table .table-striped .table-hover (Bootstrap-3-Erbe)
============================================================ */
body.hc-cart main .table, body.hc-news main .table, body.hc-checkout main .table,
body.hc-conf main .table, body.hc-acct main .table,
body.hc-auth main .table, body.hc-wl main .table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--card);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--border-soft);
}
body.hc-cart main .table th, body.hc-news main .table th, body.hc-checkout main .table th,
body.hc-conf main .table th, body.hc-acct main .table th,
body.hc-auth main .table th, body.hc-wl main .table th {
background: var(--card-hi);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text);
padding: 14px 16px;
border: none;
border-bottom: 1px solid var(--border-soft);
text-align: left;
}
body.hc-cart main .table td, body.hc-news main .table td, body.hc-checkout main .table td,
body.hc-conf main .table td, body.hc-acct main .table td,
body.hc-auth main .table td, body.hc-wl main .table td {
padding: 14px 16px;
border: none;
border-bottom: 1px solid var(--border-soft);
color: var(--text);
font-size: 14.5px;
vertical-align: middle;
}
body.hc-cart main .table tr:last-child td, body.hc-news main .table tr:last-child td, body.hc-checkout main .table tr:last-child td,
body.hc-conf main .table tr:last-child td, body.hc-acct main .table tr:last-child td,
body.hc-auth main .table tr:last-child td, body.hc-wl main .table tr:last-child td {
border-bottom: none;
}
body.hc-cart main .table-striped tbody tr:nth-of-type(odd), body.hc-news main .table-striped tbody tr:nth-of-type(odd),
body.hc-checkout main .table-striped tbody tr:nth-of-type(odd),
body.hc-conf main .table-striped tbody tr:nth-of-type(odd),
body.hc-acct main .table-striped tbody tr:nth-of-type(odd),
body.hc-auth main .table-striped tbody tr:nth-of-type(odd),
body.hc-wl main .table-striped tbody tr:nth-of-type(odd) {
background: color-mix(in srgb, var(--card-hi) 50%, transparent);
}
body.hc-cart main .table-hover tbody tr:hover, body.hc-news main .table-hover tbody tr:hover,
body.hc-checkout main .table-hover tbody tr:hover,
body.hc-conf main .table-hover tbody tr:hover,
body.hc-acct main .table-hover tbody tr:hover,
body.hc-auth main .table-hover tbody tr:hover,
body.hc-wl main .table-hover tbody tr:hover {
background: color-mix(in srgb, var(--primary) 8%, var(--card));
}
/* ============================================================
§6 — Alerts / Hinweisboxen
NOVA: .alert .alert-success .alert-info .alert-warning .alert-danger
============================================================ */
body.hc-cart main .alert, body.hc-news main .alert, body.hc-checkout main .alert,
body.hc-conf main .alert, body.hc-acct main .alert,
body.hc-auth main .alert, body.hc-wl main .alert {
border-radius: var(--r-md);
padding: 14px 18px;
font-size: 14px;
line-height: 1.55;
border: 1px solid var(--border-soft);
background: var(--card);
color: var(--text);
margin-bottom: 18px;
}
body.hc-cart main .alert-success, body.hc-news main .alert-success, body.hc-checkout main .alert-success,
body.hc-conf main .alert-success, body.hc-acct main .alert-success,
body.hc-auth main .alert-success, body.hc-wl main .alert-success {
background: color-mix(in srgb, var(--primary) 12%, var(--card));
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}
body.hc-cart main .alert-info, body.hc-news main .alert-info, body.hc-checkout main .alert-info,
body.hc-conf main .alert-info, body.hc-acct main .alert-info,
body.hc-auth main .alert-info, body.hc-wl main .alert-info {
background: color-mix(in srgb, var(--brand-teal) 12%, var(--card));
border-color: color-mix(in srgb, var(--brand-teal) 50%, transparent);
}
body.hc-cart main .alert-warning, body.hc-news main .alert-warning, body.hc-checkout main .alert-warning,
body.hc-conf main .alert-warning, body.hc-acct main .alert-warning,
body.hc-auth main .alert-warning, body.hc-wl main .alert-warning {
background: color-mix(in srgb, var(--hot) 12%, var(--card));
border-color: color-mix(in srgb, var(--hot) 50%, transparent);
}
body.hc-cart main .alert-danger, body.hc-news main .alert-danger, body.hc-checkout main .alert-danger,
body.hc-conf main .alert-danger, body.hc-acct main .alert-danger,
body.hc-auth main .alert-danger, body.hc-wl main .alert-danger {
background: color-mix(in srgb, var(--hot-2) 12%, var(--card));
border-color: color-mix(in srgb, var(--hot-2) 50%, transparent);
}
/* ============================================================
§7 — Pro-Scope Feintuning
Hier nur dezente Anpassungen, die in den jeweiligen Seiten
sinnvoll sind — KEINE Layout-Brüche.
============================================================ */
/* ---------- §7.1 Warenkorb (.hc-cart) ---------- */
body.hc-cart main .basket-totals, body.hc-news main .basket-totals,
body.hc-cart main .checkout-summary, body.hc-news main .checkout-summary,
body.hc-cart main .order-summary , body.hc-news main .order-summary {
background: var(--card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: 0 14px 40px -28px rgba(0,0,0,.18);
}
body.hc-cart main .basket-total, body.hc-news main .basket-total,
body.hc-cart main .total, body.hc-news main .total,
body.hc-cart main .grand-total , body.hc-news main .grand-total {
font-family: var(--font-display);
font-weight: 800;
color: var(--primary);
}
/* Mini-Fortschrittsbalken Richtung Gratis-Versand/Goody (falls NOVA-Template ihn rendert) */
body.hc-cart main .progress , body.hc-news main .progress {
background: var(--card-hi);
border-radius: var(--r-pill);
height: 8px;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--border-soft);
}
body.hc-cart main .progress-bar , body.hc-news main .progress-bar {
background: var(--ribbon);
height: 100%;
border-radius: var(--r-pill);
transition: width .4s var(--ease);
}
/* ---------- §7.2 Checkout (.hc-checkout) ---------- */
body.hc-checkout main .checkout-step,
body.hc-checkout main .step,
body.hc-checkout main .progress-step {
border-bottom: 2px solid var(--border-soft);
padding-bottom: 10px;
}
body.hc-checkout main .checkout-step.active,
body.hc-checkout main .step.active,
body.hc-checkout main .progress-step.is-active {
border-bottom-color: var(--primary);
color: var(--primary);
}
body.hc-checkout main .payment-method,
body.hc-checkout main .shipping-method {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--r-md);
padding: 16px 18px;
margin-bottom: 10px;
transition: border-color .2s var(--ease);
}
body.hc-checkout main .payment-method:hover,
body.hc-checkout main .shipping-method:hover,
body.hc-checkout main .payment-method.is-selected,
body.hc-checkout main .shipping-method.is-selected {
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
/* ---------- §7.3 Bestellbestätigung (.hc-conf) ---------- */
body.hc-conf main .confirmation-hero,
body.hc-conf main .order-success {
background: var(--hero-grad);
border-radius: var(--r-xl);
padding: 32px 28px;
text-align: center;
}
body.hc-conf main .order-number,
body.hc-conf main .order-id {
font-family: var(--font-display);
font-weight: 800;
color: var(--primary);
letter-spacing: .02em;
}
/* ---------- §7.4 Kundenkonto (.hc-acct) ---------- */
body.hc-acct main .account-nav,
body.hc-acct main .sidebar,
body.hc-acct main .left-nav {
background: var(--card);
border-radius: var(--r-lg);
border: 1px solid var(--border-soft);
padding: 10px;
}
body.hc-acct main .account-nav a,
body.hc-acct main .sidebar a,
body.hc-acct main .left-nav a {
display: block;
padding: 10px 14px;
border-radius: var(--r-md);
font-weight: 600;
font-size: 14px;
color: var(--text);
text-decoration: none;
transition: background .18s var(--ease), color .18s var(--ease);
}
body.hc-acct main .account-nav a:hover,
body.hc-acct main .sidebar a:hover,
body.hc-acct main .left-nav a:hover {
background: var(--card-hi);
color: var(--primary);
text-decoration: none;
}
body.hc-acct main .account-nav a.active,
body.hc-acct main .sidebar a.active,
body.hc-acct main .left-nav a.active,
body.hc-acct main .account-nav li.active a,
body.hc-acct main .sidebar li.active a,
body.hc-acct main .left-nav li.active a {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
}
/* ---------- §7.5 Login / Registrierung (.hc-auth) ---------- */
body.hc-auth main .login-form,
body.hc-auth main .registration-form,
body.hc-auth main .auth-card {
background: var(--card);
border: 1px solid var(--border-soft);
border-radius: var(--r-xl);
padding: 36px 32px;
max-width: 460px;
margin: 40px auto;
box-shadow: 0 30px 70px -32px rgba(0,0,0,.25);
}
body.hc-auth main .login-form h1,
body.hc-auth main .registration-form h1,
body.hc-auth main .auth-card h1 {
font-size: clamp(22px, 2.4vw, 30px);
margin: 0 0 18px;
text-align: center;
}
body.hc-auth main .form-divider {
display: flex; align-items: center; gap: 14px;
color: var(--dim); font-size: 12.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
margin: 22px 0;
}
body.hc-auth main .form-divider::before,
body.hc-auth main .form-divider::after {
content: ""; flex: 1; height: 1px; background: var(--border-soft);
}
/* ---------- §7.6 Merkliste (.hc-wl) ---------- */
body.hc-wl main .wishlist-item,
body.hc-wl main .product-tile,
body.hc-wl main .item {
background: var(--card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
body.hc-wl main .wishlist-item:hover,
body.hc-wl main .product-tile:hover,
body.hc-wl main .item:hover {
transform: translateY(-2px);
box-shadow: 0 22px 50px -28px rgba(0,0,0,.25);
}
body.hc-wl main .price,
body.hc-wl main .product-price {
font-family: var(--font-display);
font-weight: 800;
color: var(--primary);
}
/* ============================================================
§8 — NOVA-Defaults entschärfen (sanft, ohne Layoutbruch)
============================================================ */
/* runde Karten überall, weichere Schatten */
body.hc-cart main .well, body.hc-news main .well, body.hc-checkout main .well,
body.hc-conf main .well, body.hc-acct main .well,
body.hc-auth main .well, body.hc-wl main .well {
background: var(--card);
border: 1px solid var(--border-soft);
}
/* Badges, falls NOVA sie irgendwo rendert */
body.hc-cart main .badge, body.hc-news main .badge, body.hc-checkout main .badge,
body.hc-conf main .badge, body.hc-acct main .badge,
body.hc-auth main .badge, body.hc-wl main .badge {
background: var(--primary);
color: var(--primary-ink);
border-radius: var(--r-pill);
padding: 3px 10px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .04em;
}
/* Tooltips / Popover behalten ihre NOVA-Struktur, nur Farbe angleichen */
body.hc-cart main .tooltip-inner, body.hc-news main .tooltip-inner, body.hc-checkout main .tooltip-inner,
body.hc-conf main .tooltip-inner, body.hc-acct main .tooltip-inner,
body.hc-auth main .tooltip-inner, body.hc-wl main .tooltip-inner {
background: var(--brand-navy);
color: #fff;
border-radius: var(--r-md);
font-size: 12.5px;
padding: 8px 10px;
}
/* ============================================================
§9 — Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
body.hc-cart main .btn, body.hc-news main .btn, body.hc-checkout main .btn,
body.hc-conf main .btn, body.hc-acct main .btn,
body.hc-auth main .btn, body.hc-wl main .btn,
body.hc-wl main .wishlist-item, body.hc-wl main .product-tile,
body.hc-checkout main .payment-method, body.hc-checkout main .shipping-method {
transition: none;
}
}
/* ============================================================
§10 — Kontakt-Spezialseite (hc-kontakt): Reef-Basis fuers native Formular
============================================================ */
body.hc-kontakt main .container { margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
body.hc-kontakt main { padding-top:8px; padding-bottom:56px; }
body.hc-kontakt { background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed; color:var(--text); font-family:var(--font-body); }
body.hc-kontakt main h1, body.hc-kontakt main .h1, body.hc-kontakt main h2, body.hc-kontakt main h3, body.hc-kontakt main legend, body.hc-kontakt main .title { font-family:var(--font-display); font-weight:800; color:var(--text); }
body.hc-kontakt main .form-control, body.hc-kontakt main input[type=text], body.hc-kontakt main input[type=email], body.hc-kontakt main input[type=tel], body.hc-kontakt main textarea, body.hc-kontakt main select { background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:var(--r-md); padding:10px 14px; font-family:var(--font-body); font-size:14.5px; }
body.hc-kontakt main .form-control:focus, body.hc-kontakt main input:focus, body.hc-kontakt main textarea:focus, body.hc-kontakt main select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
body.hc-kontakt main label, body.hc-kontakt main .control-label { font-weight:600; font-size:13px; color:var(--text); }
body.hc-kontakt main .btn { font-family:var(--font-body); font-weight:700; border-radius:var(--r-pill); border:none; padding:12px 22px; cursor:pointer; }
body.hc-kontakt main .btn-primary, body.hc-kontakt main .btn-success, body.hc-kontakt main button[type=submit] { background:var(--primary); color:var(--primary-ink); box-shadow:var(--glow); }
body.hc-kontakt main .card, body.hc-kontakt main .panel, body.hc-kontakt main .well { background:var(--card); border:1px solid var(--border-soft); border-radius:var(--r-lg); }
body.hc-kontakt main .contact-form { max-width:820px; margin-left:auto; margin-right:auto; }
body.hc-kontakt main .contact-form fieldset, body.hc-kontakt main .contact-form .form-group { margin-bottom:14px; }
/* ==========================================================================
HC-SYSGRID — Bootstrap-4-Grid fuer JTL-System-Seiten (Warenkorb/Checkout/
Konto/Registrierung/Merkzettel/Kontakt).
WARUM: HawaiiCards/template.xml (Child von NOVA) ueberschreibt die
-Gruppe und laesst NOVA's bootstrap-grid.css weg. clear.css
ist Bootstrap OHNE Grid-Partial -> .row/.col-* existierten shopweit nicht,
NOVA-System-Seiten kollabierten zur linksbuendigen Textliste.
Quelle: templates/NOVA/themes/base/bootstrap/bootstrap-grid.css (unveraendert).
STRIKT gescopt auf System-Seiten-Bodies + : Startseite, Kategorie- und
Produktseiten nutzen ebenfalls .row/col-*-Markup, sind aber ohne Grid gebaut
und abgenommen -> duerfen sich NICHT veraendern.
Nicht enthalten: Container-/Spacing-/Flex-/Display-Utilities (liefert clear.css).
========================================================================== */
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .no-gutters {
margin-right: 0;
margin-left: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .no-gutters > .col,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-1,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-2,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-3,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-4,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-5,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-6,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-7,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-8,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-9,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-10,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-11,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-12,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-auto,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-1,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-2,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-3,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-4,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-5,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-6,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-7,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-8,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-9,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-10,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-11,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-12,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-auto,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-1,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-2,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-3,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-4,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-5,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-6,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-7,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-8,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-9,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-10,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-11,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-12,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-auto,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-1,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-2,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-3,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-4,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-5,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-6,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-7,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-8,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-9,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-10,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-11,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-12,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-auto,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-1,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-2,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-3,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-4,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-5,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-6,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-7,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-8,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-9,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-10,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-11,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-12,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl,
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-1 > * {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-2 > * {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-3 > * {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-4 > * {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-5 > * {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-6 > * {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-first {
-ms-flex-order: -1;
order: -1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-last {
-ms-flex-order: 13;
order: 13; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-0 {
-ms-flex-order: 0;
order: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-1 {
-ms-flex-order: 1;
order: 1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-2 {
-ms-flex-order: 2;
order: 2; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-3 {
-ms-flex-order: 3;
order: 3; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-4 {
-ms-flex-order: 4;
order: 4; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-5 {
-ms-flex-order: 5;
order: 5; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-6 {
-ms-flex-order: 6;
order: 6; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-7 {
-ms-flex-order: 7;
order: 7; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-8 {
-ms-flex-order: 8;
order: 8; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-9 {
-ms-flex-order: 9;
order: 9; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-10 {
-ms-flex-order: 10;
order: 10; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-11 {
-ms-flex-order: 11;
order: 11; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-12 {
-ms-flex-order: 12;
order: 12; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-1 {
margin-left: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-2 {
margin-left: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-3 {
margin-left: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-4 {
margin-left: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-5 {
margin-left: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-6 {
margin-left: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-7 {
margin-left: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-8 {
margin-left: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-9 {
margin-left: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-10 {
margin-left: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-11 {
margin-left: 91.666667%; }
@media (min-width: 576px) {
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-sm-1 > * {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-sm-2 > * {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-sm-3 > * {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-sm-4 > * {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-sm-5 > * {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-sm-6 > * {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-sm-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-first {
-ms-flex-order: -1;
order: -1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-last {
-ms-flex-order: 13;
order: 13; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-0 {
-ms-flex-order: 0;
order: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-1 {
-ms-flex-order: 1;
order: 1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-2 {
-ms-flex-order: 2;
order: 2; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-3 {
-ms-flex-order: 3;
order: 3; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-4 {
-ms-flex-order: 4;
order: 4; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-5 {
-ms-flex-order: 5;
order: 5; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-6 {
-ms-flex-order: 6;
order: 6; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-7 {
-ms-flex-order: 7;
order: 7; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-8 {
-ms-flex-order: 8;
order: 8; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-9 {
-ms-flex-order: 9;
order: 9; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-10 {
-ms-flex-order: 10;
order: 10; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-11 {
-ms-flex-order: 11;
order: 11; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-sm-12 {
-ms-flex-order: 12;
order: 12; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-0 {
margin-left: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-1 {
margin-left: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-2 {
margin-left: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-3 {
margin-left: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-4 {
margin-left: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-5 {
margin-left: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-6 {
margin-left: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-7 {
margin-left: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-8 {
margin-left: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-9 {
margin-left: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-10 {
margin-left: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-sm-11 {
margin-left: 91.666667%; }
}
@media (min-width: 768px) {
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-md-1 > * {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-md-2 > * {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-md-3 > * {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-md-4 > * {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-md-5 > * {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-md-6 > * {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-md-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-first {
-ms-flex-order: -1;
order: -1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-last {
-ms-flex-order: 13;
order: 13; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-0 {
-ms-flex-order: 0;
order: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-1 {
-ms-flex-order: 1;
order: 1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-2 {
-ms-flex-order: 2;
order: 2; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-3 {
-ms-flex-order: 3;
order: 3; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-4 {
-ms-flex-order: 4;
order: 4; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-5 {
-ms-flex-order: 5;
order: 5; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-6 {
-ms-flex-order: 6;
order: 6; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-7 {
-ms-flex-order: 7;
order: 7; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-8 {
-ms-flex-order: 8;
order: 8; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-9 {
-ms-flex-order: 9;
order: 9; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-10 {
-ms-flex-order: 10;
order: 10; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-11 {
-ms-flex-order: 11;
order: 11; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-md-12 {
-ms-flex-order: 12;
order: 12; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-0 {
margin-left: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-1 {
margin-left: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-2 {
margin-left: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-3 {
margin-left: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-4 {
margin-left: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-5 {
margin-left: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-6 {
margin-left: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-7 {
margin-left: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-8 {
margin-left: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-9 {
margin-left: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-10 {
margin-left: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-md-11 {
margin-left: 91.666667%; }
}
@media (min-width: 992px) {
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-lg-1 > * {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-lg-2 > * {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-lg-3 > * {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-lg-4 > * {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-lg-5 > * {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-lg-6 > * {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-lg-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-first {
-ms-flex-order: -1;
order: -1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-last {
-ms-flex-order: 13;
order: 13; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-0 {
-ms-flex-order: 0;
order: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-1 {
-ms-flex-order: 1;
order: 1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-2 {
-ms-flex-order: 2;
order: 2; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-3 {
-ms-flex-order: 3;
order: 3; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-4 {
-ms-flex-order: 4;
order: 4; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-5 {
-ms-flex-order: 5;
order: 5; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-6 {
-ms-flex-order: 6;
order: 6; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-7 {
-ms-flex-order: 7;
order: 7; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-8 {
-ms-flex-order: 8;
order: 8; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-9 {
-ms-flex-order: 9;
order: 9; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-10 {
-ms-flex-order: 10;
order: 10; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-11 {
-ms-flex-order: 11;
order: 11; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-lg-12 {
-ms-flex-order: 12;
order: 12; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-0 {
margin-left: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-1 {
margin-left: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-2 {
margin-left: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-3 {
margin-left: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-4 {
margin-left: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-5 {
margin-left: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-6 {
margin-left: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-7 {
margin-left: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-8 {
margin-left: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-9 {
margin-left: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-10 {
margin-left: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-lg-11 {
margin-left: 91.666667%; }
}
@media (min-width: 1200px) {
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-xl-1 > * {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-xl-2 > * {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-xl-3 > * {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-xl-4 > * {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-xl-5 > * {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .row-cols-xl-6 > * {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .col-xl-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-first {
-ms-flex-order: -1;
order: -1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-last {
-ms-flex-order: 13;
order: 13; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-0 {
-ms-flex-order: 0;
order: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-1 {
-ms-flex-order: 1;
order: 1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-2 {
-ms-flex-order: 2;
order: 2; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-3 {
-ms-flex-order: 3;
order: 3; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-4 {
-ms-flex-order: 4;
order: 4; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-5 {
-ms-flex-order: 5;
order: 5; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-6 {
-ms-flex-order: 6;
order: 6; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-7 {
-ms-flex-order: 7;
order: 7; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-8 {
-ms-flex-order: 8;
order: 8; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-9 {
-ms-flex-order: 9;
order: 9; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-10 {
-ms-flex-order: 10;
order: 10; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-11 {
-ms-flex-order: 11;
order: 11; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .order-xl-12 {
-ms-flex-order: 12;
order: 12; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-0 {
margin-left: 0; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-1 {
margin-left: 8.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-2 {
margin-left: 16.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-3 {
margin-left: 25%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-4 {
margin-left: 33.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-5 {
margin-left: 41.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-6 {
margin-left: 50%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-7 {
margin-left: 58.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-8 {
margin-left: 66.666667%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-9 {
margin-left: 75%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-10 {
margin-left: 83.333333%; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .offset-xl-11 {
margin-left: 91.666667%; }
}
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .img-fluid { max-width: 100%; height: auto; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .img-thumbnail { padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height: auto; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .figure-img { margin-bottom: 0.5rem; line-height: 1; }
body:is(.hc-cart,.hc-checkout,.hc-conf,.hc-acct,.hc-auth,.hc-wl,.hc-kontakt,.hc-news,.hc-search) main .nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
/* /HC-SYSGRID */
/* ==========================================================================
HC-NEWS-POLISH — Newsletter-Systemseite (/Newsletter, data-page 8).
Ergaenzt den geerbten System-Skin um die newsletter-spezifische Struktur
(2 Formulare, .h3-Div-Ueberschriften, rohe NOVA-Fieldsets).
========================================================================== */
body.hc-news main .newsletter-subscribe,
body.hc-news main .newsletter-unsubscribe {
background: var(--card, #fff);
border: 1px solid var(--border-soft, rgba(12,30,42,.10));
border-radius: var(--r-lg, 18px);
padding: 24px clamp(16px, 3vw, 30px);
margin: 0 0 22px;
box-shadow: 0 8px 26px rgba(12,30,42,.05);
}
body.hc-news main .h3 {
font-family: var(--font-display, "Epilogue"), sans-serif;
font-weight: 800;
font-size: 20px;
letter-spacing: -.01em;
color: var(--text, #0c1e2a) !important;
margin: 0 0 6px;
}
body.hc-news main fieldset {
border: 0 !important;
padding: 0 !important;
margin: 0;
min-width: 0;
}
body.hc-news main .newsletter-subscribe-consent,
body.hc-news main p.info.small {
color: var(--muted, #52525b);
font-size: 13px;
line-height: 1.55;
margin-top: 12px;
}
/* Abmelden-Button: die kaum sichtbare gelbe Outline auf lesbar setzen */
body.hc-news main .newsletter-unsubscribe .btn {
border: 1.5px solid var(--border-soft, rgba(12,30,42,.18)) !important;
background: transparent;
color: var(--text, #0c1e2a);
}
body.hc-news main .newsletter-unsubscribe .btn:hover {
border-color: var(--primary, #ef820e) !important;
color: var(--primary, #ef820e);
}
/* ========================================================================== */
/* ==========================================================================
HC-SEARCH-POLISH — Suchergebnisseite (/?qs=…, data-page 2, body.hc-search).
Grid selbst kommt aus dem geteilten HC-SYSGRID-Tupel oben (hc-search dort
ergaenzt). Dieser Block ist die Premium-Optik obendrauf: Kopfzeile,
Toolbar, Produktkachel-Skin fuer das native NOVA-.productbox-Markup,
Pagination + die JS-injizierten Bloecke .hc-search-suggest/.hc-search-popular
(0-Treffer-UX, siehe custom.js HC-SEARCH-UX).
========================================================================== */
body.hc-search #result-wrapper {
max-width: 1320px;
margin: 0 auto;
padding: 32px 24px 64px;
}
body.hc-search #result-wrapper > h1 {
font-family: var(--font-display, "Epilogue"), sans-serif;
font-weight: 800;
font-size: clamp(24px, 3vw, 34px);
letter-spacing: -.01em;
color: var(--text, #0c1e2a);
margin: 0 0 22px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-soft, rgba(12,30,42,.08));
}
/* --- Toolbar (Sortierung / Artikel pro Seite / Ansicht) --- */
body.hc-search .productlist-page-nav-header-m { margin-bottom: 6px; }
body.hc-search .productlist-page-nav .btn-group > .btn,
body.hc-search .productlist-page-nav .dropdown-toggle {
font-family: var(--font-body, "Space Grotesk"), sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text, #0c1e2a);
background: var(--card, #fff);
border: 1px solid var(--border-soft, rgba(12,30,42,.12));
border-radius: 10px;
padding: 8px 14px;
}
body.hc-search .productlist-page-nav .btn-group > .btn:hover,
body.hc-search .productlist-page-nav .dropdown-toggle:hover {
border-color: var(--primary, #ef820e);
color: var(--primary, #ef820e);
}
body.hc-search .productlist-page-nav .dropdown-menu {
border-radius: 12px;
border: 1px solid var(--border-soft, rgba(12,30,42,.1));
box-shadow: 0 12px 30px rgba(12,30,42,.14);
overflow: hidden;
}
body.hc-search .productlist-page-nav .dropdown-item.active,
body.hc-search .productlist-page-nav .dropdown-item:hover {
background: var(--primary, #ef820e);
color: #fff;
}
body.hc-search .productlist-item-info {
font-family: var(--font-body, "Space Grotesk"), sans-serif;
font-size: 13px;
color: var(--muted, #4d6470);
}
body.hc-search .productlist-page-nav-bottom,
body.hc-search .productlist-page-nav-top { border-color: var(--border-soft, rgba(12,30,42,.08)); margin: 18px 0; }
/* --- Produktkachel-Skin (natives .productbox, kein Kachel-Rebuild) --- */
/* WURZEL des Kollaps-Bugs: NOVAs Equal-Height-JS setzt inline `height:48px` auf
die Spalten — gemessen im Moment des Initial-Loads, als die Kacheln (noch ohne
Grid-CSS) auf Titel-Hoehe kollabiert waren. Das friert 48px ein, der Inhalt
laeuft raus und der Ergebnis-Zaehler ueberlappt die erste Reihe. Fix: die
Spaltenhoehe per !important auf auto zwingen (schlaegt jeden Inline-Style, auch
wenn das JS erneut setzt) -> Spalte = natuerliche Inhaltshoehe. */
body.hc-search #product-list .product-wrapper { height: auto !important; }
body.hc-search .productbox {
background: var(--card, #fff);
border: 1px solid var(--border-soft, rgba(12,30,42,.07));
border-radius: var(--r-lg, 18px);
padding: 12px 12px 16px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
/* !important erzwingt die korrekte Hoehen-Neuberechnung — ohne kollabiert die
Kachel bei lazy-geladenen Bildern (Layout wird vor Bild-Reservierung fixiert
und nicht invalidiert). Eng gescopt auf die Suchseite, kein Kollateral. */
height: auto !important;
}
body.hc-search .productbox:hover {
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(12,30,42,.12);
border-color: var(--primary, #ef820e);
}
/* .square (1:1-Bildrahmen) fehlt in clear.css (wie das Grid gestrippt) -> Bilder
kollabierten auf Hoehe 0 (bekannte data-page-2-Falle). Platz per padding-bottom
reservieren (robuster als aspect-ratio: echtes In-Flow-Element, propagiert die
Hoehe zuverlaessig an die Vorfahren, auch bevor das Bild geladen ist). */
body.hc-search .productbox-image.square { position: relative; display: block; height: auto; }
body.hc-search .productbox-image.square::before { content: ""; display: block; padding-bottom: 100%; }
body.hc-search .productbox-image.square > .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body.hc-search .productbox-image.square picture,
body.hc-search .productbox-image.square img { width: 100%; height: 100%; object-fit: contain; }
body.hc-search .productbox-image .inner { border-radius: 12px; overflow: hidden; background: var(--bg, #f4f1e8); }
/* Multi-Bild-Produkte: NOVAs .list-gallery stapelt sonst ALLE Bilder vertikal
uebereinander (clear.css strippt die Hover-Swap-Regel, mit padding-bottom
nimmt jedes Bild volle 1:1-Hoehe) -> Kacheln werden riesig mit weisser Luecke.
Nur das erste Bild (.first-wrapper) zeigen -> alle Kacheln einheitlich hoch. */
body.hc-search .productbox-images .productbox-image.square:not(.first-wrapper) { display: none !important; }
body.hc-search .productbox-ribbon,
body.hc-search .ribbon {
font-family: var(--font-body, "Space Grotesk"), sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
background: var(--primary, #ef820e);
color: #fff;
border-radius: 999px;
padding: 4px 12px;
text-transform: uppercase;
}
body.hc-search .productbox-title a {
font-family: var(--font-display, "Epilogue"), sans-serif;
font-weight: 700;
font-size: 14.5px;
line-height: 1.35;
color: var(--text, #0c1e2a);
}
body.hc-search .productbox-title a:hover { color: var(--primary, #ef820e); }
body.hc-search .productbox [class*="price"] {
font-family: var(--font-display, "Epilogue"), sans-serif;
font-weight: 800;
color: var(--primary, #ef820e);
}
body.hc-search .productbox .action-tip-animation-b,
body.hc-search .productbox-quick-actions .btn {
border-radius: 999px;
border: 1px solid var(--border-soft, rgba(12,30,42,.1));
background: var(--card, #fff);
}
body.hc-search .productbox-quick-actions .btn:hover {
border-color: var(--primary, #ef820e);
color: var(--primary, #ef820e);
}
/* --- Pagination --- */
body.hc-search .pagination .page-link {
font-family: var(--font-body, "Space Grotesk"), sans-serif;
border-radius: 10px;
margin: 0 3px;
border: 1px solid var(--border-soft, rgba(12,30,42,.1));
color: var(--text, #0c1e2a);
}
body.hc-search .pagination .page-item.active .page-link {
background: var(--primary, #ef820e);
border-color: var(--primary, #ef820e);
color: #fff;
}
body.hc-search .pagination .page-item.disabled .page-link { opacity: .4; }
/* --- 0-Treffer: Alert-Box im Brand-Look --- */
body.hc-search .alert.alert-info {
background: var(--card, #fff);
border: 1px solid var(--border-soft, rgba(12,30,42,.1));
border-radius: var(--r-lg, 18px);
color: var(--text, #0c1e2a);
font-family: var(--font-body, "Space Grotesk"), sans-serif;
font-size: 14.5px;
padding: 18px 20px;
}
body.hc-search #suche2 .form-control {
border-radius: 12px;
border: 1px solid var(--border-soft, rgba(12,30,42,.14));
background: var(--card, #fff);
color: var(--text, #0c1e2a);
}
body.hc-search #suche2 .btn-primary {
background: var(--primary, #ef820e);
border-color: var(--primary, #ef820e);
border-radius: 12px;
font-family: var(--font-body, "Space Grotesk"), sans-serif;
font-weight: 700;
}
/* --- 0-Treffer: "Meinten Sie…?" + Beliebte Kategorien (JS-injiziert) --- */
body.hc-search .hc-search-suggest,
body.hc-search .hc-search-popular { margin: 26px 0 0; }
body.hc-search .hc-search-suggest h2,
body.hc-search .hc-search-popular h2 {
font-family: var(--font-display, "Epilogue"), sans-serif;
font-weight: 800;
font-size: 18px;
color: var(--text, #0c1e2a);
margin: 0 0 12px;
}
body.hc-search .hc-search-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body.hc-search .hc-search-chips a {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body, "Space Grotesk"), sans-serif;
font-size: 13.5px;
font-weight: 600;
color: var(--text, #0c1e2a);
background: var(--card, #fff);
border: 1px solid var(--border-soft, rgba(12,30,42,.12));
border-radius: 999px;
padding: 9px 16px;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.hc-search .hc-search-chips a:hover {
border-color: var(--primary, #ef820e);
color: var(--primary, #ef820e);
background: rgba(239,130,14,.08);
}
body.hc-search .hc-search-popular-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
body.hc-search .hc-search-popular-grid a {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 84px;
padding: 16px;
font-family: var(--font-display, "Epilogue"), sans-serif;
font-weight: 700;
font-size: 14.5px;
color: var(--text, #0c1e2a);
background: var(--card, #fff);
border: 1px solid var(--border-soft, rgba(12,30,42,.1));
border-radius: 16px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.hc-search .hc-search-popular-grid a:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(12,30,42,.12);
border-color: var(--primary, #ef820e);
color: var(--primary, #ef820e);
}
/* ========================================================================== */
/* ==========================================================================
FD-17 (19.07.2026) — Register-/Konto-Formular: Floating-Label-Fix
NOVA rendert die Labels als position:absolute Floating-Labels mit HART
weissem Hintergrund + einen ::after-Stern mit weissem Kasten -> im Dark-Mode
"versetzte weisse Kaestchen". Fix: statische Labels UEBER dem Feld (Auth-
Standard), Pflicht-Stern orange, Typeahead (PLZ/Ort) theme-sicher.
Gilt fuer Registrieren (body.hc-auth) UND Konto-Unterseiten (body.hc-acct).
========================================================================== */
body.hc-auth main .col-form-label,
body.hc-acct main .col-form-label,
body.hc-auth main .floating-label label,
body.hc-acct main .floating-label label {
position: static !important;
transform: none !important;
background: transparent !important;
color: var(--text) !important;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1.2;
padding: 0 0 6px 2px !important;
margin: 0 !important;
width: auto;
height: auto;
max-width: none;
white-space: normal;
opacity: 1 !important;
text-align: left;
pointer-events: auto;
}
/* Pflicht-Stern (::after "*") ohne weissen Kasten, in Markenorange */
body.hc-auth main .col-form-label::after,
body.hc-acct main .col-form-label::after {
background: transparent !important;
color: var(--primary) !important;
padding: 0 !important;
margin: 0 0 0 3px !important;
border-radius: 0 !important;
box-shadow: none !important;
position: static !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
}
/* Wrapper der Floating-Labels: Label soll ueber dem Feld stehen (nicht ueberlagern) */
body.hc-auth main .d-flex.flex-column-reverse,
body.hc-acct main .d-flex.flex-column-reverse { position: relative; }
/* Typeahead PLZ/Ort: Wrapper + Input theme-sicher (waren weisse Kaesten im Dark) */
body.hc-auth main .twitter-typeahead,
body.hc-acct main .twitter-typeahead { display: block !important; width: 100%; background: transparent; }
body.hc-auth main .tt-input,
body.hc-acct main .tt-input { background: var(--surface) !important; color: var(--text) !important; width: 100% !important; }
body.hc-auth main .tt-hint,
body.hc-acct main .tt-hint { color: var(--muted) !important; opacity: .55; }
body.hc-auth main .tt-menu,
body.hc-acct main .tt-menu { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; margin-top: 4px; }
body.hc-auth main .tt-suggestion,
body.hc-acct main .tt-suggestion { padding: 8px 12px; color: var(--text); cursor: pointer; }
body.hc-auth main .tt-suggestion.tt-cursor,
body.hc-auth main .tt-suggestion:hover,
body.hc-acct main .tt-suggestion.tt-cursor,
body.hc-acct main .tt-suggestion:hover { background: var(--card-hi); }
/* ========================================================================== */
/* FD-17 Nachtrag: das erste Passwort-Feld nutzt .flex-column (statt -reverse) ->
Label landete UNTER dem Feld. Label per order nach oben ziehen (nur dieses Feld). */
body.hc-auth main .register-form-account-password.d-flex.flex-column .col-form-label,
body.hc-acct main .register-form-account-password.d-flex.flex-column .col-form-label { order: -1; }
/* ========================================================================== */
/* ==========================================================================
HC-SEARCH-TOOLBAR-ALIGN — Suchseite: Toolbar sauber auf EINE Linie (oben+unten)
(19.07.2026, Marcel-Auftrag "Bestandsaufnahme Suchseite": Treffer-Zaehler
kollidierte mit den Ansicht-Icons, uneinheitliche Element-Hoehen, nichts auf
einer Linie). Ursache: native NOVA-Bootstrap-Grid-Toolbar (.col/.col-12),
Mobil-Variante (-header-m) rendert auf Desktop, kein HC-Toolbar-Layout.
Fix: die .row-Toolbar als sauberer, vertikal zentrierter Flex-Streifen;
Sortierung/Artikel-pro-Seite/Ansicht links (alle 40px), Zaehler+Pagination
als Cluster rechts. Nur body.hc-search. ========================================================================== */
body.hc-search .productlist-page-nav {
display: flex !important;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 20px;
}
body.hc-search .productlist-page-nav .displayoptions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
width: auto !important;
max-width: none !important;
}
body.hc-search .productlist-page-nav .btn-group { height: 40px; align-items: center; }
body.hc-search .productlist-page-nav .dropdown-toggle,
body.hc-search .productlist-page-nav .btn-option {
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
body.hc-search .productlist-page-nav .btn-option { width: 44px; padding: 0; }
body.hc-search .productlist-page-nav .btn-option.active {
background: var(--primary, #ef820e);
color: #fff;
border-color: var(--primary, #ef820e);
}
body.hc-search .productlist-page-nav .productlist-item-info {
flex: 0 0 auto;
width: auto !important;
max-width: none !important;
margin-left: auto;
border: 0 !important;
padding: 0 2px;
white-space: nowrap;
align-self: center;
}
body.hc-search .productlist-page-nav .productlist-pagination {
flex: 0 0 auto;
width: auto !important;
max-width: none !important;
}
body.hc-search .productlist-page-nav .navbar-pagination { margin: 0; }
/* ========================================================================== */