.huba-suche-wrap {
position: relative;
width: 100%;
} .huba-suche-input {
width: 100%;
padding: 9px 40px 9px 14px;
background: #ffffff;
border: 1.5px solid #e0e0e0;
border-radius: 8px;
font-size: 13px;
color: #1a1a1a;
line-height: 1.4;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
outline: none;
}
.huba-suche-input::placeholder {
color: #aaa;
}
.huba-suche-input:focus {
border-color: #d80000;
box-shadow: 0 0 0 3px rgba(216, 0, 0, 0.1);
} .huba-suche-icon {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
color: #bbb;
font-size: 13px;
pointer-events: none;
transition: color 0.2s;
}
.huba-suche-wrap:focus-within .huba-suche-icon {
color: #d80000;
} .huba-suche-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
z-index: 99999;
overflow: hidden;
} .huba-suche-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 13px;
text-decoration: none !important;
color: inherit !important;
border-bottom: 1px solid #f4f4f4;
transition: background 0.13s;
}
.huba-suche-item:last-of-type {
border-bottom: none;
}
.huba-suche-item:hover {
background: #fafafa;
}
.huba-suche-item img {
width: 38px;
height: 38px;
object-fit: cover;
border-radius: 5px;
flex-shrink: 0;
background: #f2f2f2;
}
.huba-suche-item-info {
flex: 1;
min-width: 0;
}
.huba-suche-item-name {
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.huba-suche-item-price {
font-size  : 11.5px;
font-weight: 700;
color      : #d80000;
margin-top : 1px;
}
.huba-suche-item-vat {
font-size  : 10px;
font-weight: 400;
color      : #999;
} .huba-suche-footer {
display: block;
padding: 9px 13px;
text-align: center;
font-size: 12px;
font-weight: 700;
color: #d80000 !important;
text-decoration: none !important;
background: #fafafa;
border-top: 1px solid #f0f0f0;
transition: background 0.13s;
}
.huba-suche-footer:hover {
background: #f0f0f0;
}
.huba-suche-footer i {
margin-left: 4px;
font-size: 11px;
} .huba-suche-loading,
.huba-suche-empty {
padding: 14px 13px;
text-align: center;
font-size: 13px;
color: #aaa;
}
.huba-suche-loading i {
margin-right: 5px;
} .huba-erg-page {
width: 100%;
} .huba-erg-topbar {
display        : flex;
align-items    : center;
gap            : 20px;
margin-bottom  : 28px;
flex-wrap      : wrap;
}
.huba-erg-search {
flex: 0 0 320px;
max-width: 320px;
}
.huba-erg-meta {
margin   : 0;
font-size: 14px;
color    : #666;
}
.huba-erg-meta strong {
color: #1a1a1a;
} .huba-erg-grid {
display              : grid;
grid-template-columns: repeat(3, 1fr);
gap                  : 20px;
}
@media (max-width: 900px) {
.huba-erg-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.huba-erg-search { flex: 1 1 100%; max-width: 100%; }
.huba-erg-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 520px) {
.huba-erg-grid { grid-template-columns: 1fr; }
} .huba-erg-card {
background    : #fff;
border        : 1px solid #e8e8e8;
border-radius : 10px;
overflow      : hidden;
display       : flex;
flex-direction: column;
transition    : box-shadow 0.2s, transform 0.2s;
position      : relative;
padding-top   : 15px;
}
.huba-erg-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
transform : translateY(-2px);
} .huba-erg-img-wrap {
display  : block;
overflow : hidden;
aspect-ratio: 4 / 3;
}
.huba-erg-img-wrap img {
width     : 100%;
height    : 100%;
object-fit: cover;
display   : block;
transition: transform 0.35s ease;
}
.huba-erg-card:hover .huba-erg-img-wrap img {
transform: scale(1.04);
} .huba-erg-body {
padding        : 13px 14px 14px;
display        : flex;
flex-direction : column;
flex           : 1;
gap            : 6px;
}
.huba-erg-cat {
position     : absolute;
top          : 10px;
left         : 10px;
display      : inline-block;
font-size    : 10.5px;
font-weight  : 700;
text-transform: uppercase;
letter-spacing: .6px;
color        : #d80000;
background   : #fff0f0;
border-radius: 4px;
padding      : 2px 7px;
z-index      : 2;
}
.huba-erg-name {
display        : block;
font-size      : 14px;
font-weight    : 700;
color          : #1a1a1a;
text-decoration: none;
line-height    : 1.35;
transition     : color 0.15s;
}
.huba-erg-name:hover { color: #d80000; }
.huba-erg-actions {
margin-top: auto;
padding-top: 8px;
}
.huba-erg-btn {
display        : inline-flex;
align-items    : center;
gap            : 6px;
background     : #d80000;
color          : #fff !important;
text-decoration: none !important;
font-size      : 12px;
font-weight    : 700;
padding        : 7px 14px;
border-radius  : 6px;
transition     : background 0.18s, transform 0.15s;
}
.huba-erg-btn:hover {
background: #b80000;
transform : translateY(-1px);
}
.huba-erg-btn i { font-size: 10px; } .huba-erg-empty {
text-align: center;
padding   : 48px 20px;
color     : #aaa;
}
.huba-erg-empty i {
font-size    : 40px;
margin-bottom: 14px;
display      : block;
}
.huba-erg-empty p {
margin   : 0 0 6px;
font-size: 16px;
color    : #666;
}
.huba-erg-empty-hint {
font-size: 13px !important;
color    : #aaa !important;
}
.huba-erg-empty-hint a {
color: #d80000;
text-decoration: none;
}
.huba-erg-empty-hint a:hover { text-decoration: underline; } .huba-erg-content {
margin-top : 40px;
padding-top: 28px;
border-top : 1px solid #efefef;
font-size  : 14px;
color      : #444;
line-height: 1.75;
width      : 100%;
}
.huba-erg-content h2, .huba-erg-content h3 { color: #1a1a1a; margin-top: 20px; }
.huba-erg-content p  { margin: 0 0 12px; }
.huba-erg-content ul { margin: 0 0 12px 20px; }
.huba-erg-content li { margin-bottom: 4px; }
.huba-erg-content a  { color: #d80000; } .huba-erg-hero {
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid #efefef;
}
.huba-erg-h1 {
font-size  : 28px;
font-weight: 800;
line-height: 1.2;
color      : #1a1a1a;
margin     : 0 0 10px;
}
.huba-erg-intro {
font-size  : 14px;
color      : #555;
line-height: 1.65;
margin     : 0;
max-width  : 680px;
}
.huba-erg-intro strong { color: #1a1a1a; }
.huba-erg-intro a      { color: #d80000; text-decoration: none; }
.huba-erg-intro a:hover{ text-decoration: underline; }
@media (max-width: 600px) {
.huba-erg-h1 { font-size: 22px; }
} .huba-erg-specs {
list-style           : none;
padding              : 0;
margin               : 8px 0 0;
display              : grid;
grid-template-columns: 1fr 1fr;
gap                  : 5px 8px;
}
.huba-erg-spec {
display    : flex;
align-items: center;
gap        : 5px;
font-size  : 11.5px;
color      : #555;
}
.huba-erg-spec i {
color     : #d80000;
font-size : 10px;
width     : 12px;
text-align: center;
flex-shrink: 0;
}
.huba-erg-spec-label {
color      : #999;
font-weight: 600;
white-space: nowrap;
}
.huba-erg-spec-val {
color      : #1a1a1a;
font-weight: 500;
}