/* =========================================================
   ABSCHNITT 1: Basis Icon-Styling & Modifikatoren
   ========================================================= */

/* Styling für kleine Icons (Technische Daten) */
.icon-field {
    width: 20px;
    height: 20px;
    display: inline-flex;    
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 6px;       
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    /* Der Filter-Trick für Blau (#003164) */
    filter: invert(10%) sepia(90%) saturate(2800%) hue-rotate(200deg) brightness(80%) contrast(100%);
}

/* Styling für große Icons (Feature-Leiste) */
.icon-field.icon-large {
    width: 50px !important;
    height: 50px !important;
    margin-right: 0 !important;       
    margin-bottom: 12px !important;   
}


/* =========================================================
   ABSCHNITT 2: Bild-Zuweisungen (Sämtliche SVG-Pfade)
   ========================================================= */

/* Kleine Icons */
.icon-laenge   { background-image: url('/images/Terhi/sonstiges/laenge.svg'); }
.icon-breite   { 
    background-image: url('/images/Terhi/sonstiges/laenge.svg'); 
    transform: rotate(90deg); 
}
.icon-gewicht  { background-image: url('/images/Terhi/sonstiges/gewicht.svg'); }
.icon-personen { background-image: url('/images/Terhi/sonstiges/personen.svg'); }
.icon-motorisierung,
.icon-motor    { background-image: url('/images/Terhi/sonstiges/motor.svg'); }

/* Große Icons */
.icon-regenwolke { background-image: url('/images/Terhi/sonstiges/regenwolke.svg'); }
.icon-sun,
.icon-sonne      { background-image: url('/images/Terhi/sonstiges/sonne.svg'); }
.icon-trailer    { background-image: url('/images/Terhi/sonstiges/trailer.svg'); }

/* =========================================================
   ABSCHNITT 3: Responsive Icon-Anpassungen
   ========================================================= */

@media (max-width: 992px) {
    /* 🌟 Hier wird die Icon-Größe für Tablets sauber korrigiert */
    .icon-field.icon-large {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 6px !important;
    }
}